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 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: , , and rotateZ()."

"The 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 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 <angle> type can be one of four units: One degree is 1/360 of a fu"

rotateZ() rotates an element around its z-axis clockwise or counterclockwise. It produces the same visual effect as rotate(), but it is best used with 3D transformations. A 3D stage can be created using perspective to control how far or close the object appears from the viewer. A tumbling coin effect can be simulated with multiple 3D rotation functions, such as rotateX(), rotateY(), and rotateZ(), combined in keyframes. The shorthand transform property is avoided because it maps to a 2D matrix and can cause incorrect browser matrix calculations when mixed with 3D transforms. rotateZ() follows CSS Transforms Module Level 2 and accepts a single angle argument in degrees, turns, or radians, where positive values rotate clockwise and negative values rotate counterclockwise.

Read at CSS-Tricks