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:
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.
Using the examples above, try to deform the element simultaneously along two axes
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.