CSS - skew()

The `skew()` CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

Examples

Using a single x-angle

HTML

HTML
```<p>foo</p>
<p class="transformed">bar</p>```

CSS

CSS
```p {
width: 50px;
height: 50px;
background-color: teal;
}

.transformed {
/* the same as skewX(10deg); */
transform: skew(10deg);
background-color: blue;
}```

Using two angles

HTML

HTML
```<p>foo</p>
<p class="transformed">bar</p>```

CSS

CSS
```p {
width: 50px;
height: 50px;
background-color: teal;
}

.transformed {
transform: skew(10deg, 10deg);
background-color: blue;
}```

Syntax

CSS
```skew(ax)       or
skew(ax, ay)```

Description

The `skew()` CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.

ax
Is an `<angle>` representing the angle to use to distort the element along the abscissa.
ay
Is an `<angle>` representing the angle to use to distort the element along the ordinate.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
$\left(\begin{array}{c}1tan\left(ax\right)\\ tan\left(ay\right)1\end{array}\right)$ $\left(\begin{array}{cc}1tan\left(ax\right)& 0\\ tan\left(ay\right)1& 0\\ 0& 0& 1\\ \end{array}\right)$ $\left(\begin{array}{cc}1tan\left(ax\right)& 0\\ tan\left(ay\right)1& 0\\ 0& 0& 1\end{array}\right)$ $\left(\begin{array}{ccc}1tan\left(ax\right)& 0& 0\\ tan\left(ay\right)1& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$
`[1 tan(ay) tan(ax) 1 0 0]`