CSS свойство rotate3d ведет себя неожиданно - PullRequest
Новая
       5

CSS свойство rotate3d ведет себя неожиданно

1 голос
/ 29 февраля 2020

Я читал о свойстве CSS rotate3d () для поворота элемента. Я думал, что первые три параметра в функции - это множители, а четвертый - это степень.

Значение множителей должно быть в диапазоне от 0 до 1. Это означает, что rotate3d(1, 0, 0, 90deg) приведет только к rotateX (90deg). Чтобы получить больший диапазон поворотов, я изменил его на rotate3d(0.25, 0, 0, 360deg), но он дает совершенно другой результат.

Я также заметил, что transform: rotateX(45deg) rotateY(45deg); - это не то же самое, что transform: rotate3d(1,1,0, 45deg);. и др c. Если мы не можем просто изменить множитель требуемых размеров, чтобы получить желаемые повороты, как мне рассчитать значение трех множителей?

Спасибо.

1 Ответ

1 голос
/ 01 марта 2020

При использовании rotate3d(x, y, z, a) первые 3 числа являются координатами, которые будут определять вектор вращения, а a - это угол поворота. Они не являются множителями вращения.

rotate3d(1, 0, 0, 90deg) - это то же самое, что и rotate3d(0.25, 0, 0, 90deg), а также то же самое, что и rotate3d(X, 0, 0, 90deg), потому что у нас будет один и тот же вектор во всех случаях. Что также совпадает с rotateX(90deg)

.box {
  margin:30px;
  padding:20px;
  background:red;
  display:inline-block;
}
<div class="box" style="transform:rotate3d(1,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(99,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(0.25,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(100,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(-5,0,0,60deg)"></div>
<div class="box" style="transform:rotateX(60deg)"></div>

Из этого можно также сделать вывод, что rotate3d(0, Y, 0, a) совпадает с rotateY(a), а rotate3d(0, 0, Y, a) - с rotate(a). Обратите внимание на использование 0 в двух из координат, которые делают наш вектор всегда на одной оси (X или Y или Z) * ​​1022 *

rotate3d(1,1,0, 45deg) - это не то же самое, что rotateX(45deg) rotateY(45deg). Первый будет выполнять одно вращение вокруг вектора, заданного (1,1,0), а второй будет два последовательное вращение вокруг осей X и Y.

Другими словами, rotate3d() - это не комбинация другого вращения, а вращение само по себе. Другие вращения являются частными случаями rotate3d() с учетом предварительно определенной оси.

Трюк умножения применяется к координате, если вы сохраняете тот же угол. rotate3d(x, y, z, a) эквивалентно rotate3d(p*x, p*y, p*z, a), потому что если вы умножаете все координаты на одно и то же значение, вы сохраняете одно и то же направление вектора и изменяете только векторное измерение, которое не имеет значения при определении поворота. Уместно только направление.

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

Вы можете четко заметить, что использование значений в диапазоне [-1,1] для x,y,z достаточно, чтобы определить все комбинации. С другой стороны, любая комбинация x,y,z может быть уменьшена до значений внутри диапазона [-1,1]

Примеры: 

.box {
  margin:30px;
  padding:20px;
  background:red;
  display:inline-block;
}
<div class="box" style="transform:rotate3d(10,5,-9,60deg)"></div>
<div class="box" style="transform:rotate3d(1,0.5,-0.9,60deg)"></div>

<div class="box" style="transform:rotate3d(25,-5,-8,60deg)"></div>
<div class="box" style="transform:rotate3d(1,-0.2,-0.32,60deg)"></div>

Мы просто делим на наибольшее число.

...