Course Recommendation:

CSS rotateX() Function

Definition and Usage rotateX() CSS

rotateX() The function defines the 3D rotation of the element around the x-axis (horizontal direction). transform Used in the attribute.

Example

Example 1

Using rotateX() Rotate multiple <div> elements around the x-axis (horizontal direction):

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

Try It Yourself

Example 2

Using rotateX() Rotate images around the x-axis (horizontal direction):

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

Try It Yourself

CSS Syntax

rotateX(angle)

Technical Details

Browser Support

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

Related Pages

Tutorial:CSS 3D Transformation

Reference:CSS transform attribute

Reference:CSS rotate attribute

Reference:CSS rotate() function

Reference:CSS rotate3d() function

Reference:CSS rotateY() function

Reference:CSS rotateZ() function