Рекомендации по курсу:

Функция rotateZ() в CSS

Определение и использование rotateZ() CSS

rotateZ() Функция определяет 3D-вращение элемента вокруг оси z. transform Использование в свойстве.

Совет:rotateZ(angle) Эквивалентно rotate(angle).

Пример

Пример 1

Использование rotateZ() Вращение нескольких элементов <div> вокруг оси z:

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

Попробуйте сами

Пример 2

Использование rotateZ() Вращение изображения вокруг оси z:

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

Попробуйте сами

Грамматика CSS

rotateZ(angle)
Значение Описание
angle

Обязателен. Укажите угол поворота. Возможные единицы:

  • deg（градусы)
  • rad（радианы)
  • turn（круг)

Технические детали

Версия: CSS Transforms Module Level 2

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Соответствующие страницы

Учебник:3D-трансформации в CSS

См. также:Свойство transform в CSS

См. также:Свойство CSS rotate

См. также:Функция rotate() в CSS

См. также:Функция rotate3d() в CSS

См. также:Функция rotateX() в CSS

См. также:Функция rotateY() в CSS