Course Recommendation:

CSS skewY() Function

Definition and Usage skewY() In CSS

skewY() The function is used to skew elements along the y-axis at the specified angle. transform Used in properties.

Example

Example 1

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

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

Try It Yourself

Example 2

Using skewY() Skew images along the y-axis at the specified angle:

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

Try It Yourself

CSS Syntax

skewY(a)
Value Description
a Required. Angle. Specifies the skew along the y-axis.

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

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

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Pagine correlate

Tutorial:Trasformazione 2D CSS

Riferimento:Proprietà transform CSS

Riferimento:Funzione skew() CSS

Riferimento:Funzione skewX() CSS