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。