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.

rotate()
function rotates the image in the clockwise direction, while the negative value rotates it in the counter-clockwise direction.The official syntax looks like this:
transform: rotate(<angle>);
For a better understanding of the transform functions, please refer to the transform entry.
Browser Support
The following is the support table for two-dimensional CSS transformations:
CSS3 2D Transforms
Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 36
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 132
- No
- 132
- 132