CSS rotateZ() Function

The CSS rotateZ() function is used to rotate elements around the z-axis in a three-dimensional space.

The 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 rotateX() and rotateY() to rotate the element around the x and y axes if required.

These functions can also be used in place of the rotate3d() function (and vice-versa). The rotateZ() function is also the equivalent of the (two-dimensional) rotate() function.

Therefore, all of the following three lines are equivalent:

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 rotate(60deg).

Negative Values

You can also use negative values. A negative value will rotate the element in a counter-clockwise direction.

Example:

Official Syntax

The official syntax of the rotateZ() function is as follows:

Possible Values

The parameter specifies the angle of the rotation. It can be any valid angle value. 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:

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.

rad

Radians. There are 2Ï€ radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

CSS Specifications

• The rotateZ() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.