CSS Reference Function

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.

rotate-example
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 Working Draft

Supported from the following versions:

Desktop

  • 36
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet

  • 9.0
  • 56
  • No
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 9:34 pm by Mary Lou

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