javascript - 试图弄清楚如何获得立方体的当前面

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 Angular 值并查看浏览器如何处理它)，我认为这些数据可能更容易看出可以从中推断出算法的模式，但是到目前为止，我什么也没看到。粘贴在下面，因为它可能会对其他人有所帮助。

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

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

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

如果 rotateX = ((270 + n*360)deg) face one 将面向用户。 与他人相似。我不太了解 jQuery 或 JS，所以这只是纯数学。