不能從一個特定的方向旋轉到另一個

Question

我有一個使用CSS3轉換和轉換的旋轉動畫立方體。

的問題是，似乎有沒有可能CSS3旋轉從起始位置在this jsfiddle以示出「4」面（一次旋轉左）。

JSFiddle的基本說明：'x'鍵使用CSS3 rotateX:90deg設置立方體，'y'代表rotateY，'z'代表rotateZ。點擊'重置'按鈕返回到起始位置。 注意事項*無論旋轉角度（x，y或z）如何，我都無法獲得立方體到左轉一個位置。

我對CSS3 ROTATE3D性能01​​，rotateY和rotateZ與影響transform屬性的CSS3 transition工作。

此外，值得一提的是，使用rotateX/Y/Z屬性允許立方體在幾乎所有其他位置/方向上向上，向左，向右或向下旋轉。

問題：

有什麼問題嗎？這個旋轉是不可能的？ CSS3旋轉有問題，還是我的代碼/邏輯有問題？

最好的答案將解釋CSS3 rotate3d轉換是如何工作的（幕後;數學）。

Answer 1

這裏發生的變換是化合物變換（在該變換矩陣進行矩陣級聯）。例如，當您將元素圍繞其x軸旋轉時，其他軸會旋轉90度，這樣圍繞y軸的旋轉就不再具有原來的右向左效果。相反，它現在表現得像一個倒置的Z軸。請看下圖：

數學基礎的問題是這樣的：當你申請多個轉換到一個點，他們所有的變換矩陣與點本身相乘，從左到右的順序的應用程序。因此，舉例來說，讓我們說90度圍繞x旋轉的矩陣是R _x，圍繞y旋轉90度的矩陣是R _和並且圍繞z旋轉90度的矩陣是R _z。

讓我們說我們按了z兩次和x一次。現在，對於在元件的任意點P，其新的位置P ^'將被計算爲：

^P' = R _Ž^。 R _z^。 R _x^。 P

不幸的是，這樣做的問題是，每個後續的轉化將適用於起因於上次計算的參考幀。所以在這種情況下，當我們圍繞它旋轉時，x軸將指向完全相反的方向。

這個問題的解決方案（我不會去的數學）是以相反的順序乘以矩陣。如果你這樣做，每個連續的轉型將是相對固定的軸，而不是相對於任何狀態先前的變換左軸中因此，我們的計算應該是這樣的：

P ^' = R _x^。 R _z^。 R _z^。 P

與WebKitCSSMatrix左右擺弄了一會兒後，我設法想出了以下解決方案：

// Make a matrix out of the transformation currently in effect 
var oldMatrix = new WebKitCSSMatrix(cube[0].style.webkitTransform); 

//Make a matrix that applies the new rotation 
var extraRotate = (new WebKitCSSMatrix()).rotate(anglex, angley, anglez); 

//Multiply them (with the new one on the left) 
var final = extraRotate.multiply(oldMatrix); 

//I need to extract the elements of the final matrix into an array. 
//They are stored like this: 1st row 1st column in key m11, 2nd row 
//1st column in key m12, etc. 
var finalstring = []; 
for (var i = 1; i < 5; i++) { 
    for (var j = 1; j < 5; j++) { 
     finalstring.push(Math.round(final['m' + i + j])); 
    } 
} 

//Make a new style rule out of our final matrix and apply it to the element 
cube[0].style.webkitTransform = 'matrix3d(' + finalstring.join(',') + ')'; 

這設法避開旋轉座標系的問題，通過預先 - 用所需的額外旋轉倍增現有變換矩陣。注意我是如何首先計算extraRotate矩陣，然後它乘到現有的變換，有效地乘以矩陣中應用的相反的順序：

^P' = R _新^。 R _舊^。 P

此計算相對於世界的新點座標的載體，而不是相對座標轉崗。

作爲獎勵，這也避免了對全局變量的需求，因爲元素的當前變換矩陣是我們需要的唯一信息。

TL; DR

以下列出一些更新的小提琴。按y將您的立方體向右旋轉90度。

這裏是一個演示：http://jsfiddle.net/guruB/

（與以前一樣，使用ž，X和ÿ繞相應的軸）

注意：您可以瞭解如何計算旋轉矩陣here.

Answer 2

在此demo

看看它使用該代碼來旋轉左：

#cube.show-left { 
     -webkit-transform: translateZ(-100px) rotateY( 90deg); 
     -moz-transform: translateZ(-100px) rotateY( 90deg); 
      -o-transform: translateZ(-100px) rotateY( 90deg); 
       transform: translateZ(-100px) rotateY( 90deg);