CSS Reference Function

rotate() 513gt

The rotate() function is used to rotate an element in two-dimensional space. 4ff1w

The element is rotated by an angle which is ed to the function as an 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 k5t66

The following is the table for two-dimensional CSS transformations:

CSS3 2D Transforms 291431

Method of transforming an element including rotating, scaling, etc. Includes for `transform` as well as `transform-origin` properties.

W3C Working Draft

ed from the following versions:

Desktop 3n671n

  • 36
  • 16
  • 10
  • 12
  • 9

Mobile / Tablet 4q224p

  • 9.0
  • 66
  • No
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated June 11, 2020 at 9:34 pm by Mary Lou

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