CSS rotateZ()

Anonymous contributor's avatar
Anonymous contributor
Published Oct 15, 2025
Contribute to Docs

The CSS rotateZ() function applies a rotation to an element around the z-axis in three-dimensional space. The transformation does not deform the element itself, which is typically an HTML element or image contributing to the web layout.

The rotateZ() function is used within the CSS transform property and is essentially equivalent to the rotate() function, with the distinction that the z-axis is explicitly specified. For example, rotateZ(45deg) is equivalent to rotate(45deg) as well as to rotate(0 0 1 45deg), where the rotation is represented by a vector in which the x and y components are zero, and the z component is positive. Similarly rotateZ(45deg) is equivalent to rotate3d(0, 0, 1, 45deg), where the rotation is defined along the z-axis.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Syntax

transform: rotateZ(a)

Parameters:

  • a: is an angle defining the degree of rotation, which can be expressed in degrees (deg), radians (rad), gradians (grad), or turns (turn). A positive value specifies a clockwise rotation, while a negative value specifies a counterclockwise rotation.

Return value:

The rotateZ() function returns a <transform-function> data type.

Example

In this example, the rotateZ() property is used to rotate some <div> containers around the z-axis. The structure is modeled in HTML as follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="original">Original Element</div>
      <div class="rotated-clockwise">Rotated Element #1</div>
      <div class="rotated-counterclockwise">Rotated Element #2</div>
    </div>
  </body>
</html>

The rotateZ() property is applied to the second and third <div> containers, so that the element with the class rotated-clockwise is rotated by 45 degrees clockwise and the element with the class rotated-counterclockwise is rotated by -45 degrees counterclockwise (i.e,. in the opposite direction):

div {
  width: 80px;
  height: 80px;
  padding: 10px;
}


.container {
  padding: 50px;
}


.original {
  background-color: lightblue;
}


.rotated-clockwise {
  transform: rotateZ(45deg);
  background-color: lightgreen;
}


.rotated-counterclockwise {
  transform: rotateZ(-45deg);
  background-color: greenyellow;
}

Here is the expected output:

Clockwise and counterclockwise rotated div containers modelled using the CSS rotateZ() function

All contributors

Contribute to Docs

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours