CSS - skewY()

The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate 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

HTML

Copy Code

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

CSS

Copy Code

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

.transformed {
  transform: skewY(40deg);
  background-color: blue;
}

Result

Syntax

CSS

Copy Code

skewY(a)

Description

a: Is an <angle> representing the angle to use to distort the element along the ordinate.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} 1 & 0 \\ tan(ax) & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ tan(ax) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ tan(ax) & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ tan(ax) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & 0 \\ tan(ax) & 1 \end{matrix})$	`[1 tan(a) 0 1 0 0]`

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-function/skewy

CSS CSS Transforms NeedsCompatTable Reference