试着找出如何得到一个立方体的电流面

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角度值，看看浏览器如何处理它)，我认为可能会更容易看到一个模式，从中可以推断出一个算法，但到目前为止，我没有看到任何东西。粘贴在下面，因为它可能会帮助别人。

<>之前面角(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

当你旋转立方体时，一些样式被添加到id="cube"

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

如果rotateX = ((270 + n*360)deg)面向，则one 将面向用户。与其他人相似。我不太懂jQuery和JS，所以这只是纯粹的数学。

Answer 2

你可以试着这样开始:

// cube and the pattern to extract the rotation values
var cube = document.getElementById('cube');
var pattern = /rotateX(([-?wd]+))s?rotateY(([-?wd]+))/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样式属性是否跨浏览器一致。另外，因为这只是一个开始，它还不会找到顶部和底部的边。