CSS: Transformations — Skewing

CSS Skewing

Learning outcomes:

  • What is skewing
  • Using the skew() function
  • Seperate functions skewX() and skewY()

What is 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.

Can you remember any other transformation function which had two seperate properties for x and y alterations and a shorthand combining both? It was translate().

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.

Skewing in the x-axis

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):

Div

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

CSS
div {
    transform: skewX(20deg);
}
Div
Notice how the skewing is performed in the x-direction; hence the name x-skew.
Specifying a positive angle tends to tilt the element backwards.

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

CSS
div {
    transform: skewX(-20deg);
}
Div
Specifying a negative angle tends to tilt the element forwards.

Skewing in the y-axis

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,

Div

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

CSS
div {
    transform: skewY(20deg);
}
Div
Specifying a positive angle tends to tilt the element upwards.

For negative arguments in skewY():

CSS
div {
    transform: skewY(-20deg);
}
Div
Specifying a negative angle tends to tilt the element downwards.

Gathering x and y - skew()

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:

CSS
div {
    transform: skew(20deg, 20deg);
}
Div
This is the same as writing transform: skewX(20deg) skewY(20deg).

Spread the word

Think that the content was awesome? Share it with your friends!

Join the community

Can't understand something related to the content? Get help from the community.

Open Discord

 Go to home Explore more courses