Skip to main content

rotateZ() CSS Function – How to Rotate Elements around Z-axis

rotateZ() transforms an element by rotating it three-dimensionally around the Z-axis.

Illustration of the 3D Cartesian coordinate system

A three-dimensional Cartesian coordinate system showing the X-, Y-, and Z-axis

Syntax of the CSS rotateZ() Function​

rotateZ() accepts a single argument. Here is the syntax:

element {
  transform: rotateZ(angle);
}
info

The rotateZ(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotate(angle).

Note the following:

  • The angle argument specifies the element's angle of rotation.
  • angle can be in degree, gradian, radian, or turn.
  • An angle argument consists of a number followed by the unit you wish to use—for instance, 45deg.
Buy CSS Flexbox book

Examples of the CSS rotateZ() Function​

Below are some examples of how the CSS rotateZ() function works.

How to do a zero-degree rotation around the Z-axis​

img {
  transform: rotateZ(0deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateZ() function to specify a zero-degree (0⁰) rotation for the image around the Z-axis.

How to do a 70-degree rotation around the Z-axis​

img {
  transform: rotateZ(70deg);
  width: 80%;
}

Try it on StackBlitz

The snippet above used the rotateZ() function to specify a seventy-degree (70⁰) rotation for the image around the Z-axis.

Overview​

This article discussed what a CSS rotateZ() function is. We also used examples to see how it works.