# rotate function

The `rotate()` function sets an element rotation by a given angle. It is used together with the `transform` property. The property value is an angle in any angle units. A positive value rotates clockwise, a negative value - counterclockwise. The rotation is performed around the point specified by the `transform-origin` property.

## Syntax

`selector { transform: rotate(угол); }`

## Example

In this example, the block is rotated `30` degrees clockwise:

`<div id="elem">lorem ipsum</div>` `#elem { transform: rotate(30deg); border: 1px solid black; width: 100px; height: 50px; }`

:

## Example

In this example, the block is rotated `30` degrees counterclockwise:

`<div id="elem">lorem ipsum</div>` `#elem { transform: rotate(-30deg); border: 1px solid black; width: 100px; height: 50px; }`

:

## Example

In this example, the block will rotate by `1` turn on hover, since the rotation value is set to `1turn` (the same effect can be achieved by setting the rotation angle to `360deg`). For smooth rotation, the `transition` property is added:

`<div id="elem">lorem ipsum</div>` `#elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; } #elem:hover { transform: rotate(1turn); }`

:

## See also

- the `rotateX` function
  that specifies a rotation around the X-axis
- the `rotateY` function
  that specifies a rotation around the Y-axis
- the `rotateZ` function
  that specifies a rotation around the Z-axis
- the `rotate3d` function
  that specifies rotation around three axes

← →
↑
en ru