# 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:

## 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:

## Radians

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

.

Here's an example of using radians:

## Turns

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

.

Here's an example of using turns:

## Negative Values

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

Example:

## Adding `transform-origin`

The default origin for the rotation is `50% 50%`

. You can use `transform-origin`

to adjust the origin of the transformation:

## Official Syntax

The official syntax of the `rotate()`

function is as follows:

`rotate() = rotate( <angle> )`

## 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.
`deg`

- 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.