CSS Attributes Index   CSS Transforms

---

Rotates an element around a fixed point on the 2D plane.

{ transform: rotate( angle ) }

angle

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

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

NOTE: rotate( a ) is equivalent to rotateZ( 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 rotate( ) function to change an element’s position on the 2D plane.

 Show me 

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

rotate3d( ), rotateX( ), rotateY( ), rotateZ( )