Course Recommendation:

CSS skewX() Function

Definition and Usage skewX() CSS

skewX() The function is used in CSS to tilt elements along the x-axis at a specified angle. transform Used in properties.

Tip:skewX(a) Is equivalent to skew(a, 0)!

Example

Example 1

Using skewX() Tilt several <div> elements along the x-axis at the specified angle:

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

Try It Yourself

Example 2

Using skewX() Tilt images along the x-axis at the specified angle:

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

Try It Yourself

CSS Syntax

skewX(a)

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Related Pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS skew() function

Reference:CSS skewY() function