css — сокращение rotate3d — Переполнение стека , 20deg)
rotateZ(15deg) эквивалентно rotate3d(0, 0, 1, 15deg)
Итак…
эквивалентно
rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)
Для универсального rotate3d(x, y, z, α) у вас есть матрица
где
Теперь вы получаете 30 3 90 32 90 3 и повернули матрицы для каждой из 40 30 32
матриц умножить их. И результирующая матрица — это матрица, соответствующая получившемуся одиночному rotate3d . Не уверен, как легко извлечь из него значения для rotate3d , но, безусловно, легко извлечь их для одного матрица 3d .
В первом случае ( rotateX(50deg) или rotate3d(1, 0, 0, 50deg) ) имеем:
x = 1 , y = 3 , , ,
α = 50 градусов
Таким образом, первая строка матрицы в этом случае равна 1 0 0 0 .
Второй 0 cos(50deg) -sin(50deg) 0 .
Третий 0 sin(50deg) cos(50deg) 0 .
И четвертый, очевидно, 0 0 0 1 .
Во втором случае x = 0 , y = 1 , z = 0 , α = 20 градусов .
Первая строка: cos(20deg) 0 sin(20deg) 0 .
Второй ряд: 0 1 0 0 .
Третья строка: -sin(20) 0 cos(20deg) 0 .
Четвертый: 0 0 0 1
0004 .
Первая строка: cos(15deg) -sin(15deg) 0 0 .
Вторая строка sin(15deg) cos(15deg) 0 0 .
А третья и четвертая строки 0 0 1 0 и 0 0 0 1 соответственно.
Примечание 
Итак, это три матрицы 4x4 , которые вам нужно перемножить, чтобы получить матрицу 4x4 для результирующего одиночного преобразования rotate3d . Как я уже сказал, я не уверен, насколько легко получить 4 значения, но 16 элементов в матрице 4×4 — это в точности 16 параметров эквивалента matrix3d цепного преобразования.
РЕДАКТИРОВАТЬ :
На самом деле, это довольно просто… Вы вычисляете след (сумму диагональных элементов) матрицы для rotate3d матрица.
4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)
Затем вы вычисляете трассировку для произведение трех матриц 4x4 , вы приравниваете результат к 2 + 2*cos(α) , вы извлекаете α . Затем вы вычисляете x , y , z .
В этом конкретном случае, если я правильно вычислил, след матрицы получается в результате произведения трех 4x4 матрицы будут:
T = cos(20град)*cos(15град) + cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + cos (50 градусов) * cos (20 градусов) + 1
Итак, cos(α) = (T - 2)/2 = T/2 - 1 , что означает, что α = acos(T/2 - 1) .
Перспектива CSS, поясняемая на примере 3D-преобразования в CSS
Перспектива — это свойство, которое включает трехмерное пространство для элемента или родительского элемента, к дочернему элементу которого можно применять различные трехмерные преобразования. Значения преобразования, такие как translate3D и rotate3D, могут перемещаться по третьей координате: оси Z.
Как работает перспектива CSS?
Чтобы включить 3D-пространство, Свойство CSS, перспектива , должна быть определена в родительском элементе, или, если это дочерний элемент или дочерний элемент, мы можем использовать функцию, перспективу () . Дочерние элементы должны иметь любое из трехмерных значений в свойстве преобразования.
Посмотрите, что произойдет, когда мы включим перспективу CSS в приведенной ниже демонстрации. Вы увидите разницу между 2D и 3D пространством. Установите флажок, чтобы включить 3D-пространство. Флажок в окне примера переключается между двухмерным и перспективным трехмерным пространством.
CSS-перспектива ведет себя по-разному в зависимости от того, к какому элементу она применена.
При применении к родительскому элементу включает трехмерное пространство только для родительского элемента. Классический пример трехмерного куба, показанный Дэвидом ДеСандро, дает базовое представление о том, как создать базовый куб с шестью простыми элементами или объектами div.
Мы будем использовать этот базовый куб, чтобы понять основные свойства и их поведение в трехмерном пространстве.
Синтаксис перспективы CSS:
Использование функции Perspective():
преобразование: перспектива (<значение>) <свойства 3D>;
значение: отсутствует или любое допустимое значение ширины
3d-свойства: Принимает значения с translateZ, translate3d, rotateX, rotateY, rotateZ, rotate3d, scaleZ, scale3d ‘#child’).style.transform = ‘perspective( Использование свойства: значение: нет или любое допустимое значение ширины Синтаксис Javascript: Художники рисуют горизонтальную линию для обозначения уровня глаз и выбирают одну точку на этой линии, чтобы провести другие диагональные линии, направляющие рисунок. Больше похоже на железнодорожный путь или дорогу, уходящую в гору. Почему важна точка схода, спросите вы? Потому что это основа трехмерного рисования или трехмерного пространства. У нас есть точка схода в CSS, которая называется перспектива-происхождение . По умолчанию начало перспективы в CSS находится в центре родительского элемента или элемента, использующего свойство перспективы. В приведенном выше примере красные линии пересекаются в одной точке на расстоянии. эта точка является точкой схода. без этой концепции геометр будет выглядеть изометрическим. Потому что они работают по-разному и требуют других свойств или функций для создания трехмерных объектов. Функция перспектива() используется для одного элемента с перспективой() в качестве первого значения в свойстве преобразования для создания единого пространства перспективы точки схода. При использовании с преобразованием он создает трехмерное пространство для элемента. Без функцииspective() другие свойства преобразования будут по-прежнему работать в ортогональном направлении . Поскольку функция перспективы работает с отдельными элементами, точка схода всегда остается в центре. Mo наведите курсор мыши, чтобы повернуть элемент . Как вы и ожидали. Каждый элемент может иметь собственное трехмерное пространство при использовании функции перспективы CSS. Они вращаются вокруг своего центра, что может быть затруднительно при создании нескольких 3D-элементов. Поскольку все они независимы, их сопоставление с группой объектов может привести к неожиданным результатам. Чтобы решить эту проблему, мы можем повернуть группу вместо поворота отдельного элемента, используя свойство перспективы CSS для родителя. Перспектива в основном используется для родительского элемента или элемента-контейнера. В основном потому, что нужно сохранить единую точку схода среди всех детей, подобных тому, что мы видим в реальном мире. Например, в приведенной ниже демонстрации, мы меняем начало перспективы. Вы можете наблюдать, как точка схода перемещается в трехмерном пространстве, а куб выравнивается в соответствии с опорными линиями, исходящими из этой единственной точки схода. Когда вы перемещаете мышь , мы изменяем transform-origin, чтобы иметь представление о перемещении точки схода между дочерними элементами. Вращение родителя будет таким же, как вращение отдельных элементов в 3D-пространстве. Для свойства CSS Perspective требуется другое свойство с именем transform-style:perspective-3d для кроссбраузерной совместимости. Transform-style работает с родительскими элементами или элементами-контейнерами и принимает плоские или трехмерные значения перспективы. Перспектива включает трехмерное пространство при использовании трехмерных преобразований. Давайте посмотрим, какие еще функции можно использовать для помещения объектов в трехмерное пространство. Чтобы узнать больше о преобразованиях перспективы CSS, вы можете прочитать эту статью. У нас есть 2 набора функций, делающих одно и то же по-разному, главным образом потому, что 3D-свойства, такие как translate3d(), scale3d() и rotate3d(), включают аппаратное ускорение. Таким образом, выбор этих функций может улучшить производительность в некоторых случаях в зависимости от того, чего вы хотите достичь, и от того, сколько объектов находится в вашем 3D-контейнере. перспектива: <значение>;
document.
getElelementById('#parent').style.perspective = ' Что такое точка схода?
Почему у нас есть два синтаксиса для перспективы?
Функция Perspective():
Свойство Perspective CSS:
Аппаратное ускорение
