CSS Matrix3D transform

Question

Я создал трехмерный эффект после использования RotateX в этой скрипке:

http://jsfiddle.net/vEWEL/11/

Однако я не уверен, как добиться такого же эффекта на красном квадрате в этой скрипке:

http://jsfiddle.net/paulsidebottom/jbfSj/

Какое преобразование Matrix3D мне нужно применить к маркеру, чтобы он встал в вертикальной плоскости?

Answer 1

Изучив первый пример, а затем просмотрев вычисленную вкладку в инспекторе Webkit, вы увидите матрицу, в которой использовалась первая матрица:

-webkit-transform: matrix3d(1, 0, 0, 0,
                            0, 0.5000000000000001, -0.8660254037844386, 0, 0,
                            0.8660254037844386, 0.5000000000000001, 0,
                            0, 0, 0, 1);

Применение этого как есть, похоже, не работает во втором примере, но это может быть из-за других различий в вашем коде.

Причина, по которой это используется, заключается в том, что матрица вращения по оси X выглядит следующим образом:

[1,0,0,0],
[0,cos(a), sin(-a), 0],
[0,sin(a), cos( a), 0],
[0,0,0,1]

В вашем случае a равно 60 градусам, что в радианах равно π / 3. cos (π / 3) = 0,5, а sin (π / 3) = sqrt (3) / 2 = 0,866025.