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-example](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2014/12/rotate-example.jpg?x86293)
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
- 126
- No
- 126
- 127