CSS Matrix3D 变换

Question

我在这个 fiddle 中使用 RotateX 后创建了 3D 效果:

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

但是，我不确定如何在这个 Fiddle 中的红色方 block 上实现相同的效果:

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。