CSS Skewing

Chapter 39 3 mins

Learning outcomes:

  1. What is skewing
  2. Using the skew() function
  3. 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:

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.

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

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

For negative arguments in skewY():

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:

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

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage