Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > rotateZ( ) Transform Function

---

Rotates an element around its Z-axis.

{ transform: rotateZ( angle ) }

angle

Floating point number representing an angle value expressed in degrees, gradians, radians, or turns.

The rotateZ( ) CSS function defines a transformation that rotates an element around a fixed point on the 2D plane.

NOTE: rotateZ( a ) is equivalent to rotate( a ) or rotate3d( 0, 0, 1, a ).

The fixed point that the element rotates around, also known as the transform origin, defaults to the center of the element, but can be set using the transform-origin property.

The passed parameter defines the amount of deviation from the element’s transform origin.

A value of 0 leaves the input unchanged.

If positive, the movement will be clockwise; if negative, the movement will be counter-clockwise.

rotateZ( ) in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when presenting flip horizontal or flip vertical effects.

The below example demonstrates the effects of applying the rotateZ( ) function to a 2D object.

 Show me 

The following shows the difference between the rotateX( ), rotateY( ), and rotateZ( ) transform functions when applied to a 2D object.

 Show me 

To see how a rotateZ( ) affects a 3d object, check this out.

 Show me 

For a brief overview, please see Understanding and Using CSS Transforms.

rotate( ), rotate3d( ), rotateX( ), rotateY( )