CSS 3D Transforms

CSS 3D Transforms

CSS also supports 3D transformations.

CSS 3D Transforms Functions

With the CSS transform property you can use the following 3D transformation functions:

  • rotateX()
  • rotateY()
  • rotateZ()

The rotateX() Function

The rotateX() function rotates an element around its X-axis at a given degree:

Example

#myDiv {
  transform: rotateX(150deg);
}

The rotateY() Function

The rotateY() function rotates an element around its Y-axis at a given degree:

Example

#myDiv {
  transform: rotateY(150deg);
}

The rotateZ() Function

The rotateZ() function rotates an element around its Z-axis at a given degree:

Example

#myDiv {
  transform: rotateZ(90deg);
}