# Функция rotateZ

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

## Синтаксис

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

## Пример

В данном примере блок по наведению повернется на `180` градусов по оси Z. Для плавности поворота добавлено свойство `transition`:

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

:

## Пример

Сменим ось вращения с помощью свойства `transform-origin`:

`<div id="elem">lorem ipsum</div>` `#elem { border: 3px solid black; width: 100px; height: 50px; transition: transform 3s linear; transform-origin: center bottom; } #elem:hover { transform: rotateZ(180deg); }`

:

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

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

← →
↑
en ru