2D transformations. Tilt — CSS: Transform (Transform objects)

The final thing that you can do with an element in 2D space using the transform property is tilt it (or rather, skew it). This transformation is achieved by tilting the element 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. Very often these features are used together to create interesting animations.

Let's take a 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 the element was transformed. 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. The same units are used 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 negative values are used, it'll skew to the right.

To understand where exactly 45 degrees is in the example, let's look at the following image. It shows the original location of the element in red and the final location in blue. You could say that the browser took both sides of our rectangle and tilted them 45 degrees. The angles we got are marked on the image.

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

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

It's important to note that: when using this technique, you should always keep a close eye on the content inside. The point is that by expanding it, we distorted the content relative to the parent block. In this situation, it's very easy to lose some of the content because it goes beyond the parent block.

The use of skewY differs fundamentally only in the axis along which the transformation takes place. The rotation is not along vertical lines, as in the case of skewX, but along horizontal lines. Because of this, the transformation itself is more obvious, 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 the element is transformed when using skewY. The red block shows an animation of the element being transformed. The green block is the element after using skewY(45deg).

Note the vertical lines. They show the y-axis. You can see from the lines that the element itself is not deformed in any way along the x-axis, since the lines are always straight.

Additional assignment

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.