試圖找出如何得到一個立方體的當前面

Question

我一直在玩弄Paul Hayes' 3d Cube試圖找出一個算法，可以確定在任何給定的時間，當前面臨的用戶立方體的面部。這裏是面的相關CSS：

#cube .one { 
    -webkit-transform: rotateX(90deg) translateZ(200px); 
} 

#cube .two { 
    -webkit-transform: translateZ(200px); 
} 

#cube .three { 
    -webkit-transform: rotateY(90deg) translateZ(200px); 
} 

#cube .four { 
    -webkit-transform: rotateY(180deg) translateZ(200px); 
} 

#cube .five { 
    -webkit-transform: rotateY(-90deg) translateZ(200px); 
} 

#cube .six { 
    -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px); 
} 

任何人有什麼想法？

編輯：

我已經收集了一些樣本數據（純粹進入任意的X和Y角度值，看瀏覽器如何處理它），我認爲可能更容易看到一個模式，從該算法可以推斷出來，但到目前爲止我沒有看到任何東西。在下面粘貼，因爲它可能會幫助別人。

 
Face Angle (xAngle, yAngle) 
-------------------------------- 
1  (-90, 0) (-90, -90) 
2  (0, 0) (180, 180) 
3  (0, -90) (180, 90) (-180, 90) 
4  (0, 180) (180, 0) (-180, 0) (0, -180) 
5  (0, 90) 
6  (90, 0) (90, 90) (90, 180) 

Answer 1

你可以嘗試這樣的事情作爲開始：

// cube and the pattern to extract the rotation values 
var cube = document.getElementById('cube'); 
var pattern = /rotateX\(([-?\w\d]+)\)\s?rotateY\(([-?\w\d]+)\)/g; 

// extract each value 
result = pattern.exec(cube.style.transform); // rotateX(0deg) rotateY(-360deg) 

// if we found a result 
if(result){ 

    var x = parseInt(result[1]); // 0deg 
    var y = parseInt(result[2]); // -360deg 

    // the side we're looking for -3 -2 -1 0 1 2 3 
    var side = (y/90) % 4; 

    console.log(side)  
} 
else{ 
    // the property hasn't been set on the cube so we must be on the first one 
    console.log(0); 
} 

這個工作在Firefox，我不知道，如果transform樣式屬性是跨瀏覽器一致的。此外，由於這只是一個開始，它不會找到頂部和底部。

Answer 2

當你旋轉立方體，一些樣式添加到id="cube"

<div id="cube" style="-webkit-transform: rotateX(90deg) rotateY(0deg);"> 

如果rotateX = ((270 + n*360)deg)臉one將面向用戶。 類似的。我不太瞭解jQuery或JS，所以這只是純粹的數學。