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.
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.
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.
The rotateZ() function is defined in the CSS Transforms Module Level 2 specification.
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
The <angle> type can be one of four units:
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.
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.
The rotateZ() function is defined in the CSS Transforms Module Level 2 specification.
The rotateZ() function has baseline support on all modern browsers.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →