rotateZ()

The rotateZ() function is used to rotate an element about the z-axis in three-dimensional space.

It is equivalent to:

transform: rotate3d(0, 0, 1, <angle>);
                

Where rotate3d() is the transformation function used to rotate an element in three-dimensional space.

It takes an <angle> as a value. The element is rotated then by the specified value about the z-axis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counter-clockwise direction. The clockwise direction is determined by looking at the x-axis starting from the end (where the pointing arrow usually is) towards the origin. See the rotate3d() section in the transform entry for a visual representation of the clockwise direction along the x-axis.

Examples:

transform: rotateZ(30deg);
transform: rotateZ(-135deg);
transform: rotateZ(90deg);
                

The following image shows the result of applying rotateZ(50deg) and rotateZ(-50deg) on an image:

The official syntax looks as follows:

transform: rotateZ(<angle>);
                

For a better understanding of the transform functions, please refer to the transform entry.