CSS Skewing

Skewing is defined as the tilting of an element through a given angle. The greater the angle the greater the tilting.

We have skews in the x-, y- and z-axis that tilt an element in the corresponding direction. For this chapter we will stick with the first two only - the z-axis being left for 3D transformations.

To skew in the x-axis we can use the function skewX and in the y-axis, the function skewY. As a shorthand for both these functions we have skew() which takes two params: x-skew and y-skew in the given order.

Since skew transformations also rely on angles, just like rotations, in turns out that skew functions need <angle> values too.

With so much on board now, let's dive into some examples.

We'll start by looking over skews in the x-axis. Take a look at the initial style of the div below (which we will be skewing):

And now let's skew this i.e tilt this element by 20 degrees:

div {
    transform: skewX(20deg);
}

Just like with translations and rotations, skews can also accept negative arguments. Following we skew the div by -20 degrees.

div {
    transform: skewX(-20deg);
}

Now that we've covered the x-axis we will move over to the vertical y axis and see how skew work in it. Considering the following example as a reference,

we will now skew this element vertically by 20 degrees.:

div {
    transform: skewY(20deg);
}

For negative arguments in skewY():

div {
    transform: skewY(-20deg);
}

If we want to skew in two directions we can use the functions skewX() and skewY() seperately and that would work perfectly fine, but there is yet a shortcut way of doing so and that is using skew().

So supposing we want to 20 degrees x-skew and 20 degress y-skew we can simply do the following:

div {
    transform: skew(20deg, 20deg);
}