Рекомендуемый курс:

Функция CSS rotate3d()

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

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

Пример

Пример 1

Используйте rotate3d() Повернуть несколько элементов <div>:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

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

Пример 2

Используйте rotate3d() Повернуть изображение:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

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

Синтаксис CSS

rotate3d(x, y, z, angle,
) Описание
x Либо положительное, либо отрицательное число, определяет вращение вокруг оси x.
y Либо положительное, либо отрицательное число, определяет вращение вокруг оси y.
z Либо положительное, либо отрицательное число, определяет вращение вокруг оси z.
angle

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

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

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

Версия: Модуль трансформаций CSS уровня 2

Поддержка браузеров

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

Chrome Edge Firefox Safari Opera
12 12 10 4 15

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

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

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

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

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

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

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

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