CSS rotate() Function

The CSS rotate() function is used to rotate elements in a two-dimensional space.

The rotate() function rotates an element based on the angle that you provide as an argument. You can provide the angle using any valid CSS angle value (i.e. in degrees, gradians, radians, or turns).

Degrees

There are 360 degrees in a full circle. The unit identifier for degrees is deg.

Here's an example of using degrees with the rotate() function:

<style>
  .rotated {
    transform: rotate(15deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Gradians

There are 400 gradians in a full circle. The unit identifier for gradians is grad.

Gradians are also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier).

Here's an example of using gradians:

<style>
  .rotated {
    transform: rotate(20grad);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Radians

There are 2Ï€ radians in a full circle. The unit identifier for radians is rad.

Here's an example of using radians:

<style>
  .rotated {
    transform: rotate(.8rad);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Turns

There is 1 turn in a full circle. The unit identifier for turns is turn.

Here's an example of using turns:

<style>
  .rotated {
    transform: rotate(.4turn);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Negative Values

You can also use negative values for the angle. A negative value will rotate the element in a counter-clockwise direction.

Example:

<style>
  .rotated {
    transform: rotate(-15deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Adding `transform-origin`

The default origin for the rotation is 50% 50%. You can use transform-origin to adjust the origin of the transformation:

<style>
  .rotated {
    transform-origin: 90% 90%;
    transform: rotate(15deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated.
</div>
<div>
  Not rotated.
</div>

Official Syntax

The official syntax of the rotate() function is as follows:

Possible Values

The rotate() function accepts any valid angle value that defines the angle for the rotation. This angle can be represented with any of the following units:

deg: Degrees. There are 360 degrees in a full circle.
grad: Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use grad as the unit identifier). There are 400 gradians in a full circle.
rad: Radians. There are 2Ï€ radians in a full circle.
turn: Turns. There is 1 turn in a full circle.

Zero Angles

The unit identifier is optional for zero angles. For example, both rotate(0deg) and rotate(0) are valid (but rotate(45) is not).

CSS Specifications

The rotate() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.