Abakada: Back to Basics > Language References > CSS Properties > Transform Functions > rotate( ) Transform Function
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.
rotate( ) 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 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.
For a brief overview, please see Understanding and Using CSS Transforms.
rotate3d( ), rotateX( ), rotateY( ), rotateZ( )