rotate()

The rotate() function is used to rotate an element in two-dimensional space.

The element is rotated by an angle which is passed to the function as an <angle> value. The element is rotated around the origin as defined by the transform-origin property.

A positive value will rotate the element in the clockwise direction. A negative value will rotate it in the counter-clockwise direction.

Examples:

transform: rotate(45deg);
transform: rotate(-60deg);
transform: rotate(1.5rad);
transform: rotate(1turn);
                

The following image shows the result of applying a positive and then a negative rotation value to an image. Notice how the images overlap each other because the transformation on each one does not affect the flow of content around it.

The official syntax looks like this:

transform: rotate(<angle>);
                

For a better understanding of the transform functions, please refer to the transform entry.