rotateZ()

The CSS rotateZ() function rotates an element around its z-axis, so clockwise or counterclockwise. While it produces the same visual effect as the rotate() function, it’s best used in 3D transformations. It is one of many transform functions used along with the transform property.

In the demo, we first set up a stage for our 3D element with perspective. It represents the projection of the 3D element from the viewer’s perspective, indicating how far or close the object appears.

.stage {
  perspective: 800px;
}

We then simulate the tumbling effect of a coin that is spun on a table in slow motion, so we use three 3D rotation transform functions: rotateX(), rotateY(), and rotateZ().

The rotate() shorthand cannot be used here because it maps to a 2D matrix and could lead to wrong calculations in the browser’s matrix math when combined with 3D functions.

.tumbling-coin {
  animation: tumble 3s infinite linear;
}

@keyframes tumble {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
  }
}

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

Syntax

<rotateZ()> = rotateZ( [ <angle> | <zero> ] )

Arguments

/* <angle> in degrees */
rotateZ(90deg)   /* Element rotates 90 degrees clockwise */
rotateZ(-180deg) /* Element rotates 180 degrees counterclockwise */

/* <angle> in turns */
rotateZ(0.25turn) /* Element makes a quater turn clockwise */
rotateZ(1turn) /* Element completes a full 360-degree rotation */

/* <angle> in radians */
rotateZ(1.57rad) /* Approximately 90 degrees clockwise */
rotateZ(-3.14rad) /* Approximately 180 degrees counterclockwise */

The rotateZ() function takes a single <angle> argument, which specifies how much to rotate the element around the z-axis

The direction the element spins depends on whether the angle value is positive or negative

• A positive angle spins in the clockwise direction, while
• A negative angle spins in the counterclockwise direction

The <angle> type can be one of four units:

• deg: One degree is 1/360 of a full circle.
• grad: One gradian is 1/400 of a full circle.
• rad: A radian is the length of a circle’s diameter around the shape’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is equal to 6.2832rad or 360deg.
• turn: One turn is one full circle. So, halfway around a circle is equal to .5turn, or 180deg.

Basic usage

The rotateZ() and rotate() functions have the same visual effect, but their applications are best suited to 3D and 2D animations, respectively. Also, rotateZ() is a better option for any animation that requires the GPU compositing layer, as it’s hardware-accelerated.

In this demo, rotateZ() is used instead of rotate() though they have the same visual effect. However, if you have a complex animation on a webpage with a lot of heavy DOM elements, rotate() might cause the browser to constantly recalculate the layout on the main thread. By using rotateZ(), you force browser to promote that specific element to its own layer on the computer’s GPU, making the animation smoother and faster.

.gpu-spinner {
  animation: gpu-spin 1s linear infinite;
}

@keyframes gpu-spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

Example: Isometric card

When building 3D effects, you have to rotate elements on multiple axes. While combining transform: rotateX(60deg) rotate(-45deg) technically works, using transform: rotateX(60deg) rotateZ(-45deg) is the semantically correct approach.

.isometric-container {
  perspective: 1000px;
}

.isometric-card {
  transition: transform 0.5s ease;
  transform: rotateX(60deg) rotateZ(-45deg);
}

.isometric-card:hover {
  transform: rotateX(0deg) rotateZ(0deg) scale(1.1);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

Specification

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

Browser support

The rotateZ() function has baseline support on all modern browsers.

rotateZ() originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.

​