Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a <transform-function> data type.

This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is 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.




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
10tan(ax)1 100tan(ax)10001 100tan(ax)10001 1000tan(ax)10000100001
[1 tan(a) 0 1 0 0]



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


div {
  width: 80px;
  height: 80px;
  background-color: skyblue;

.skewed {
  transform: skewY(40deg);
  background-color: pink;



Specification Status Comment
CSS Transforms Level 1
The definition of 'skewY()' in that specification.
Working Draft Initial definition

Browser compatibility

Please see the <transform-function> data type for compatibility info.

See also

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,