`skewY()` CSS function

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Try it

transform: skewY(0);

transform: skewY(35deg);

transform: skewY(-0.06turn);

transform: skewY(0.352rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

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

Syntax

css

skewY(a)

Values

a: Is an <angle> representing the angle to use to distort the element along the ordinate (vertical, y-coordinate).

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^3
$\left( \begin{array}{cc} 1 & 0 \\ \tan(a) & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ \tan(a) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 tan(a) 0 1 0 0]`

Formal syntax

<skewY()> = 
  skewY( [ <angle> | <zero> ] )

Examples

HTML

html

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

CSS

css

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

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

Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-skewy

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Apr 18, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

skewY() CSS function

Help improve MDN

`skewY()` CSS function