CSS Reference Function


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.


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 result of applying no rotation, a positive rotation, and a negative rotation on an image. The positive 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:


  • 36
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 125
  • No
  • 125
  • 126

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by . Last updated December 11, 2016 at 9:34 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.