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
A positive value will rotate the element in the clockwise direction. A negative value will rotate it in the counter-clockwise direction.
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:
For a better understanding of the transform functions, please refer to the transform entry.
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:
Mobile / Tablet
* denotes prefix required.
Stats from caniuse.com