2D transformations and tilt —CSS: Transform (Transform objects)

The final thing you can do within 2D space using the `transform` property is tilting or skewing elements. We achieve this transformation by tilting objects along one or two axes simultaneously.

Don't confuse `rotate` and `skew``rotate` is for rotating the element, and `skew` is for transforming it by tilting it. We often use these features together to create animations.

Let's look at how exactly the element changes when we use the `skew` function. To demonstrate, take a rectangle and tilt it 45 degrees to the left. From CSS's point of view, it's a simple operation that looks like this:

``````.box {
transform: skewX(45deg);
}
``````

At first, it may seem unclear exactly how we transformed the element. Let's break it down in order:

• As with the other functions, the `skew` function is common to the `skewX` and `skewY` functions. In this example, we only used the `x-axis` transformation
• `45deg`. In the lesson about rotating an element, we described all the basic units of measurement that cover rotation operations

We use the same units to tilt the element along the axes with the `skew` function. The value used in the example is `45deg`, which means 45 degrees to the left. If we use negative values, it'll skew to the right.

Let's look at the following image to understand where 45 degrees is in the example:

It shows the element's original position in red and its final position in blue. You could say that the browser took both sides of our rectangle and tilted them 45 degrees. The resulting angles we see in the image.

As with other transformations, `skew` affects not only the block to which it is applied but also all nested blocks. You see it in the text inside the blue block of the first example.

There's a small but beautiful solution we can use to avoid this. We create a separate container for the inner block and specify the opposite value of the `skew` function. For example, if the block tilts 45 degrees horizontally, the content should tilt minus 45 degrees horizontally. It is one of the most frequent operations when using `skew`:

It's important to note that when using this technique, you should always pay close attention to the content inside. The point is that by expanding it, we have distorted the content relative to the parent block. In this situation, you'll likely lose some of the content because it goes beyond the parent block:

The usage of `skewY` differs fundamentally only in the axis along which the transformation occurs. The rotation is not along vertical lines as in the case of `skewX` but along horizontal lines.

Because of this, the transformation is more evident as the reference point for the eye changes. With `skewX`, the element itself was on the `x-axis` and didn't move, but with `skewY`, this reference point for the eye disappears:

The example above shows how we transform the element using `skewY`. The red block shows an animation of the transformed object. The green block is the element after using `skewY(45deg)`.

Note the vertical lines showing the `y-axis`. The element is not deformed along the `x-axis` since the lines are always straight.

Using the examples above, try to deform the element simultaneously along two axes.

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

130
courses
1000
exercises
2000+
hours of theory
3200
tests

• 130 courses, 2000+ hours of theory
• 1000 practical tasks in a browser
• 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time