CSS rotateZ() Function
rotateZ() function is used to rotate elements around the z-axis in a three-dimensional space.
rotateZ() function is used in 3D-transforms. It's used with the CSS
transform property to rotate an element around the y-axis. It can be used in conjunction with other rotation functions such as
rotateY() to rotate the element around the x and y axes if required.
Therefore, all of the following three lines are equivalent:
rotateZ(<angle>) rotate3d(0, 0, 1, <angle>) rotate(<angle>)
Here's an example of using
rotateZ() to rotate an element 60 degrees around the z axis. It's the equivalent of
rotate3d(0, 0, 1, 60deg) and
You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.
The official syntax of the
rotateZ() function is as follows:
rotateZ() = rotateZ( <angle> )
<angle> parameter specifies the angle of the rotation. A positive value results in a clockwise rotation, a negative value results in a counter-clockwise rotation.
The angle can be represented with any of the following unit identifiers:
- Degrees. There are 360 degrees in a full circle.
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
gradas the unit identifier). There are 400 gradians in a full circle.
- Radians. There are 2Ï€ radians in a full circle.
- Turns. There is 1 turn in a full circle.
The unit identifier is optional for zero angles. For example, both
rotateZ(0) are valid (but
rotateZ(45) is not).
The following table provided by Caniuse.com shows the level of browser support for this feature.