The ** skew()** CSS function defines a transformation that skews an element on the 2D plane. Its result is a

`<transform-function>`

data type.The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.

## Syntax

The `skew()`

function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.

skew(ax) skew(ax,ay)

### Values

`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. If not defined, its default value is`0`

, resulting in a purely horizontal skewing.

Cartesian coordinates on ℝ^{2} |
Homogeneous coordinates on ℝℙ^{2} |
Cartesian coordinates on ℝ^{3} |
Homogeneous coordinates on ℝℙ^{3} |
---|---|---|---|

$\left(\begin{array}{c}1tan(ax)\\ tan(ay)1\end{array}\right)$ | $\left(\begin{array}{cc}1tan(ax)& 0\\ tan(ay)1& 0\\ 0& 0& 1\\ \end{array}\right)$ | $\left(\begin{array}{cc}1tan(ax)& 0\\ tan(ay)1& 0\\ 0& 0& 1\end{array}\right)$ | $\left(\begin{array}{ccc}1tan(ax)& 0& 0\\ tan(ay)1& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$ |

`[1 tan(ay) tan(ax) 1 0 0]` |

## Examples

### Using a single x-angle

#### HTML

<div>Normal</div> <div class="skewed">Skewed</div>

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* Equal to skewX(10deg) */ background-color: pink; }

#### Result

### Using two angles

#### HTML

<div>Normal</div> <div class="skewed">Skewed</div>

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; }

#### Result

## Browser compatibility

Please see the `<transform-function>`

data type for compatibility info.