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

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

Syntax of the CSS `rotateZ()` Function

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

element {
  transform: rotateZ(angle);
}

Note the following:

The rotateZ(angle) function is equivalent to rotate3d(0, 0, 1, angle) or rotate(angle).
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.

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

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

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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

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

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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

CSS rotateZ() functions and CSS rotate property provide two similar ways to specify rotation transformations.

The main differences between the two rotation techniques are as follows:

The CSS rotate property allows rotating an element without using the CSS transform property.
The CSS rotate property's syntax is shorter than its function alternative.
The CSS rotate property saves you from remembering the specific order to position the transform functions.
Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transform property—from left to right.
Browsers calculate the transform properties' matrix in the following transformation matrix order:
1. translate
2. rotate
3. scale

Here's an example:

Use CSS rotate property to do a 70-degree rotation around the Z-axis:

img {
  rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */
  width: 80%;
}

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>

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

note

A none value tells browsers not to rotate the selected element.

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