## 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)`.