# Функция rotate

Функция `rotate()` задает поворот элемента на заданный угол. Используется совместно со свойством `transform`. Значением свойства служит угол в любых единицах для углов. Положительное значение поворачивает по часовой стрелке, отрицательное - против. Поворот осуществляется вокруг точки, задаваемой свойством `transform-origin`.

## Синтаксис

`селектор { transform: rotate(угол); }`

## Пример

В данном примере блок повернут на `30` градусов по часовой стрелке:

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

:

## Пример

В данном примере блок повернут на `30` градусов против часовой стрелки:

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

:

## Пример

В данном примере блок по наведению повернется на `1` оборот, так как значение поворота задано в `1turn` (такого же эффекта можно добиться, если задать угол поворота в `360deg`). Для плавности поворота добавлено свойство `transition`:

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

:

## Смотрите также

- функцию `rotateX`,
  которая задает поворот по оси X
- функцию `rotateY`,
  которая задает поворот по оси Y
- функцию `rotateZ`,
  которая задает поворот по оси Z
- функцию `rotate3d`,
  которая задает поворот по трем осям

←→
↑