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

Since skew transformations also rely on angles, just like rotations, in turns out that skew functions need `<`

values too.*angle*>

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

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

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

**x-skew**.

**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);
}
```

**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,

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

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

**upwards**.

For **negative arguments** in `skewY()`

:

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

**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);
}
```

`transform: skewX(20deg) skewY(20deg)`

.