CSS Matrix3D转换

Question

我在这个小提琴中使用RotateX后创建了3D效果：

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。