rotateZ() | CSS-Tricks
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.
CodePen Embed Fallback
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( [ | ] )
Arguments
/* in degrees */ rotateZ(90deg) /* Element rotates 90 degrees clockwise */ rotateZ(-180deg) /* Element rotates 180 degrees counterclockwise */
/* in turns */ rotateZ(0.25turn) /* Element makes a quater turn clockwise */ rotateZ(1turn) /* Element completes a full 360-degree rotation */
/* in radians */ rotateZ(1.57rad) /* Approximately 90 degrees clockwise */ rotateZ(-3.14rad) /* Approximately 180 degrees counterclockwise */
The rotateZ() function takes a single 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 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.
CodePen Embed Fallback
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); }
CodePen Embed Fallback
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.
Related
transform Almanac
on
May 13, 2026
rotate()
.element { transform: rotate(45deg); } Gabriel Shoyombo
transform Almanac
on
rotateX()
.element { transform: rotateY(60deg); } Gabriel Shoyombo
transform Almanac
on
rotateY()
.element { transform: rotateY(30deg); } Gabriel Shoyombo
Almanac
on
Jul 9, 2012
perspective
.element { perspective: 1000px; } Chris Coyier
Almanac
on
Sep 6, 2011
transform
.element { transform: scale(2); } Sara Cope
transform transform-origin Almanac
on
Jul 9, 2012
transform-origin
.element { transform-origin: top left; } Chris Coyier
Almanac
on
transform-style
.element { transform-style: preserve-3d; } Chris Coyier
TOC Syntax Arguments Basic usage Example: Isometric card Specification Browser support
This comment thread is closed. If you have important information to share, please contact us.