CSS skewY() Function

Definition and Usage

CSS skewY() CSS function to skew elements along the y-axis by the given angle.

skewY() Function used in transform Used in the attribute.

Example

Example 1

Using skewY() Skew several <div> elements along the y-axis by the given angle:

#myDiv1 {
  transform: skewY(15deg);
}
#myDiv2 {
  transform: skewY(30deg);
}
#myDiv3 {
  transform: skewY(-25deg);
}

Try It Yourself

Example 2

Using skewY() Skew an image along the y-axis by the given angle:

#img1 {
  transform: skewY(10deg);
}
#img2 {
  transform: skewY(-10deg);
}
#img3 {
  transform: skewY(5deg);
}

Try It Yourself

CSS Syntax

skewY(a)

Technical Details

Browser Support

The numbers in the table indicate the first browser version to fully support this function.

Related Pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS skew() function

Reference:CSS skewX() function