rotate3d()

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с марта 2022 года.

Функция CSS функция определяет преобразование, которое вращает элемент вокруг фиксированной оси в трёхмерном пространстве без деформации. Результатом является тип данных <transform-function>.

Попробуйте

В трёхмерном пространстве вращения имеют три степени свободы, которые вместе описывают единственную ось вращения. Ось вращения определяется вектором [x, y, z] и проходит через начало координат (как определено свойством transform-origin). Если, как указано, вектор не является нормализованным (т.е., если сумма квадратов его трёх координат не равна 1), пользовательский агент нормализует его внутри. Ненормализуемый вектор, например, нулевой вектор [0, 0, 0], приведёт к игнорированию вращения, но без нарушения всего свойства CSS.

Примечание: В отличие от вращений на плоскости, композиция 3D вращений обычно не коммутативна. Другими словами, порядок применения вращений влияет на результат.

Синтаксис

Величина вращения, создаваемая rotate3d() определяется тремя <number> и одной <angle>. <number> представляют собой x-, y- и z-координаты вектора, определяющего ось вращения. <angle> представляет собой угол вращения; если положительный, движение будет по часовой стрелке, если отрицательный — против часовой стрелки.

rotate3d(x, y, z, a)

Значения

x: Является <number>, описывающим x-координату вектора, определяющего ось вращения, которая может быть положительным или отрицательным числом.
y: Является <number>, описывающим y-координату вектора, определяющего ось вращения, которая может быть положительным или отрицательным числом.
z: Является <number>, описывающим z-координату вектора, определяющего ось вращения, которая может быть положительным или отрицательным числом.
a: Является <angle>, представляющим угол вращения. Положительный угол обозначает вращение по часовой стрелке, отрицательный — против часовой стрелки.

Однородные координаты в ℝℙ^2
Декартовы координаты в ℝ^2	Это преобразование применяется к 3D пространству и не может быть представлено на плоскости.
Декартовы координаты в ℝ^3	$\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}$
Однородные координаты в ℝℙ^3	$\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}$

Примеры

Вращение вокруг оси y

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

Результат

Вращение вокруг произвольной оси

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

Результат

Спецификации

Спецификация
CSS Трансформации Модуль 2 # funcdef-rotate3d

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`rotate3d`	12	12	10	15	4	18	10	14	3.2	1.0	3

См. также

transform свойство
rotate свойство
<transform-function>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d