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. 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 count