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.