CSS rotateZ() Function

CSS rotateZ() Function

The CSS rotateZ() function rotates an element around the Z axis, which extends perpendicular to the screen.

It is used with the transform property and accepts an angle that determines the amount of rotation. The function is useful for rotating icons, labels, images, cards, and other elements without changing their layout dimensions.

Syntax

transform: rotateZ(angle);

The rotateZ() function accepts one angle value that determines the rotation around the Z axis.

For example:

transform: rotateZ(30deg);
transform: rotateZ(-45deg);
transform: rotateZ(0.25turn);
transform: rotateZ(1rad);
transform: rotateZ(100grad);

The function returns a CSS <transform-function> value.

It is equivalent to rotate() with the same angle or rotate3d() using the axis vector (0, 0, 1).

transform: rotateZ(45deg);
transform: rotate(45deg);
transform: rotate3d(0, 0, 1, 45deg);

All three declarations describe the same rotation around the Z axis.

Parameters

The rotateZ() function accepts one required parameter.

For example:

.box {
  transform: rotateZ(45deg);
}

This rotates the element 45 degrees around the Z axis.

Unlike rotate3d(), the rotateZ() function does not require axis coordinates. The rotation axis is always the Z axis.

How It Works

The Z axis runs perpendicular to the screen, passing through the element's transform origin. Rotating around this axis turns the element within the plane of the screen.

Imagine a line extending from the center of an element toward the viewer. The element rotates around that line while remaining flat.

For example:

.box {
  transform: rotateZ(90deg);
}

The element rotates one-quarter of a full turn.

A rotation of 180 degrees turns the element upside down:

.box {
  transform: rotateZ(180deg);
}

A rotation of 360 degrees completes one full turn:

.box {
  transform: rotateZ(360deg);
}

After a full turn, the element has the same visual orientation as before the rotation.

Unlike rotateX() and rotateY(), the rotateZ() function does not tilt an element away from the screen. It rotates the element within the screen plane.

The element's original space in the document layout remains unchanged. CSS transforms affect the rendered appearance rather than the normal layout position.

Angle Units

The rotateZ() function accepts the standard CSS angle units.

For example, the following declarations all produce a quarter-turn rotation:

transform: rotateZ(90deg);
transform: rotateZ(1.570796rad);
transform: rotateZ(100grad);
transform: rotateZ(0.25turn);

The deg unit is commonly used because it is easy to read and understand. The turn unit can be convenient for full rotations and animations.

For example:

transform: rotateZ(2turn);

This specifies two complete rotations, equivalent to 720 degrees.

A unitless zero is also valid:

transform: rotateZ(0);

Nonzero angles require an angle unit.

Positive and Negative Rotations

Positive and negative angle values determine the direction of rotation.

• Positive angles: Rotate clockwise when viewed from the positive Z axis toward the origin.
• Negative angles: Rotate counterclockwise from the same viewpoint.
• Zero: Leaves the element at its original orientation.

For example:

.clockwise {
  transform: rotateZ(45deg);
}
.counterclockwise {
  transform: rotateZ(-45deg);
}

The first element rotates 45 degrees clockwise, while the second rotates 45 degrees counterclockwise.

Angles larger than 360 degrees or smaller than -360 degrees are also valid.

transform: rotateZ(450deg);
transform: rotateZ(-450deg);

The first value completes one full turn plus 90 degrees. The second completes one full turn in the opposite direction plus another 90 degrees.

Although angles that differ by full turns can produce the same final orientation, their values can affect how a transition or animation progresses.

Transform Origin

The transform-origin property determines the point around which the element rotates.

By default, the transform origin is at the center of the element:

.box {
  transform-origin: center center;
  transform: rotateZ(45deg);
}

Changing the transform origin changes the visual movement of the element during rotation.

For example:

.box {
  transform-origin: top left;
  transform: rotateZ(45deg);
}

The element rotates around its top-left corner instead of its center.

Other common values include:

transform-origin: top center;
transform-origin: bottom right;
transform-origin: center left;
transform-origin: 25% 75%;
transform-origin: 20px 40px;

Percentage values are measured relative to the element's transform reference box. Length values can position the origin at specific offsets.

Changing the transform origin is useful for creating rotating hands, hinged panels, swinging labels, and similar effects.

Perspective

Perspective controls how depth is displayed when elements are transformed in three-dimensional space.

Because rotateZ() rotates an element within the screen plane, perspective alone does not change the appearance of a simple Z-axis rotation.

For example:

.scene {
  perspective: 600px;
}
.box {
  transform: rotateZ(45deg);
}

The element still appears to rotate flat within the screen plane.

Perspective becomes visually important when rotateZ() is combined with transformations that move or tilt the element in three-dimensional space.

For example:

.scene {
  perspective: 600px;
}
.box {
  transform: rotateY(35deg) rotateZ(25deg);
}

The rotateY() transformation tilts the element in depth, while rotateZ() changes its orientation around the Z axis.

Perspective makes the depth-related distortion visible.

The order of the transform functions matters because three-dimensional rotations generally produce different results when applied in a different order.

Combining Transforms

The rotateZ() function can be combined with translation, scaling, and other rotation functions in a single transform declaration.

Rotation and Translation

The following example combines rotation with horizontal movement:

.box {
  transform: translateX(40px) rotateZ(30deg);
}

The element is rotated and translated according to the combined transform operations.

Rotation and Scaling

Scaling can change the element's size while it is rotated.

.box {
  transform: rotateZ(30deg) scale(1.2);
}

The element rotates 30 degrees and is scaled to 120% of its original dimensions.

Multiple Rotations

Multiple rotation functions can create more complex orientations.

.box {
  transform: rotateX(20deg) rotateY(30deg) rotateZ(45deg);
}

This combines rotations around all three axes.

Transform Order

The order of transform functions affects the final result.

.first {
  transform: translateX(100px) rotateZ(45deg);
}
.second {
  transform: rotateZ(45deg) translateX(100px);
}

These declarations produce different results because transform functions are composed in the order specified. With the second declaration, the translation direction is also affected by the rotation.

When using multiple transforms, place them in a deliberate order and test the resulting appearance.

rotateZ() vs. Other Rotation Functions

CSS provides several rotation functions that operate around different axes.

For example:

transform: rotateZ(45deg);
transform: rotate(45deg);
transform: rotate3d(0, 0, 1, 45deg);

These declarations produce equivalent transformations.

The main difference is how the rotation is expressed. The rotateZ() name explicitly identifies the Z axis, which can make code easier to understand when it is combined with other three-dimensional transforms.

Example

The following example compares an unrotated element with elements rotated 30 degrees clockwise and counterclockwise.

HTML:

<div class="rotation-demo">
  <div class="rotation-item">
    <div class="rotation-box">Normal</div>
  </div>
  <div class="rotation-item">
    <div class="rotation-box clockwise">+30deg</div>
  </div>
  <div class="rotation-item">
    <div class="rotation-box counterclockwise">-30deg</div>
  </div>
</div>

CSS:

.rotation-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  padding: 30px 15px;
}
.rotation-item {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rotation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: #fff;
  background-color: #3498db;
}
.clockwise {
  transform: rotateZ(30deg);
}
.counterclockwise {
  transform: rotateZ(-30deg);
}

The positive angle rotates the second box clockwise, while the negative angle rotates the third box counterclockwise.

The boxes retain their original layout positions because transforms do not change the space reserved for elements in normal document flow.

Transform Origin Example

The following example demonstrates how changing the transform origin affects the rotation of an element.

HTML:

<div class="origin-demo">
  <div class="origin-item">
    <div class="origin-box origin-center">Center</div>
  </div>
  <div class="origin-item">
    <div class="origin-box origin-corner">Top Left</div>
  </div>
</div>

CSS:

.origin-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 30px 15px;
}
.origin-item {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
.origin-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: #fff;
  background-color: #3498db;
  transform: rotateZ(30deg);
}
.origin-center {
  transform-origin: center center;
}
.origin-corner {
  transform-origin: top left;
}

The first box rotates around its center. The second box rotates around its top-left corner, causing it to move differently relative to its original position.

The grey backgrounds help illustrate the space originally occupied by each box.

Transitions and Animations

The rotateZ() function can be used with CSS transitions and animations to create smooth rotational movement.

Transition Example

A transition can animate the rotation when an element changes state.

.rotate-button {
  display: inline-block;
  transition: transform 0.4s ease;
}
.rotate-button:hover {
  transform: rotateZ(45deg);
}

When the pointer moves over the element, it rotates 45 degrees. When the pointer leaves, it returns to its original orientation.

For keyboard-accessible interactive elements, the same effect can also be applied using :focus-visible.

Animation Example

The following animation continuously rotates an element around the Z axis.

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.spinner {
  animation: spin 2s linear infinite;
}

The element completes one full rotation every two seconds.

Reduced Motion

Continuous rotation can be distracting or uncomfortable for some users. The prefers-reduced-motion media query can disable the animation when reduced motion is requested.

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

This preserves the element while removing its continuous movement.

Common Uses

The rotateZ() function is useful for visual effects that require rotation within the screen plane.

• Icons: Rotate arrows, indicators, and other interface symbols.
• Buttons: Add rotational effects to hover and focus states.
• Loading indicators: Create spinning elements using CSS animations.
• Labels: Rotate decorative labels, badges, or corner ribbons.
• Images: Tilt images or illustrations for visual emphasis.
• Cards: Apply small rotations to create layered or angled layouts.
• Interactive controls: Rotate indicators to reflect expanded or collapsed states.
• Combined transforms: Use Z-axis rotation with scaling, translation, or other three-dimensional transforms.

For example, an arrow icon can rotate when a disclosure control is expanded:

.arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
[aria-expanded="true"] .arrow {
  transform: rotateZ(90deg);
}

The arrow rotates when its parent control has aria-expanded="true".

For simple two-dimensional rotation, rotate() can be used instead. The rotateZ() function is especially descriptive when working with multiple rotation axes.

Limitations

The rotateZ() function has several requirements and behaviors to consider.

• The function requires one angle value or unitless zero.
• Nonzero angles must use a valid CSS angle unit.
• The function rotates around the Z axis only.
• It does not tilt the element toward or away from the viewer.
• Transforms change the visual appearance without changing normal document flow.
• Rotated elements may visually overlap nearby content.
• The rotation point is controlled by transform-origin.
• Perspective alone does not create visible depth from a simple Z-axis rotation.
• Multiple transform functions must be combined within the same transform declaration.
• Transform order can affect the final position and orientation.

For example, this is valid:

transform: rotateZ(45deg);

The following is also valid:

transform: rotateZ(0);

The following is invalid because a nonzero angle requires a unit:

transform: rotateZ(45);

The following is invalid because the function accepts only one angle:

transform: rotateZ(30deg, 60deg);

To combine rotation around multiple axes, use multiple transform functions or the rotate3d() function.

Also, remember that separate transform declarations do not accumulate:

.box {
  transform: rotateZ(30deg);
  transform: translateX(50px);
}

In this example, the second declaration replaces the first. To apply both transformations, write:

.box {
  transform: translateX(50px) rotateZ(30deg);
}

Browser Support

The CSS rotateZ() function has Baseline Widely available browser support. It has been supported across major browsers since July 2015, including Chrome, Edge, Firefox, and Safari.

The function is widely supported in modern desktop and mobile browsers. Older browser versions may require additional compatibility testing.

For current compatibility information, visit Can I Use? for CSS 3D transforms.

Specifications

The rotateZ() function is defined in the CSS Transforms Module Level 2 specification.

The specification defines the function's syntax, rotation axis, accepted angle values, and behavior as part of CSS transformations.

Related functions include rotate(), rotate3d(), rotateX(), and rotateY().