Course recommendation:

CSS rotateZ() function

Definition and usage rotateZ() CSS

rotateZ() The function defines a 3D rotation of an element around the z-axis. transform Used in the property.

Tip:rotateZ(angle) Is equivalent to rotate(angle).

Example

Example 1

Use rotateZ() Rotate multiple <div> elements around the z-axis:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Try it yourself

Example 2

Use rotateZ() Rotate images around the z-axis:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Try it yourself

CSS syntax

rotateZ(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 property

Reference:CSS rotate() function

Reference:CSS rotate3d() function

Reference:CSS rotateX() function

Reference:CSS rotateY() function