CSS Attributes Index   CSS Transforms

---

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.

The following example demonstrates the effects of applying the rotateZ( ) function to change an element’s position in relation to its z-axis.

 Show me 

Notice use of a transition in the transform to better illustrate the amount of deviation from the origin.

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