Register to get access to free programming courses with interactive exercises

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 skewrotate 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.

Using the skewX function

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

Hexlet Experts

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

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

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.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 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

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

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.