我目前正在构建一个查看器来显示全景照片。我将图像放置在 CSS 立方体的内部，并且正在研究如何利用 javascript 中的 deviceorientation 事件来控制它。
我已经找到并实现了一种算法，将来自 deviceorientation 事件的原始数据转换为欧拉角，但我不确定如何使用 CSS 3d 旋转变换来连接这些数据以旋转立方体。
我的目标是能够让用户举起手机环顾四周，类似于一些商业软件。
我正在考虑使用 three.js 来做到这一点，但是对于这个特定的项目来说，库的大小太大了。我们希望保持低开销。
这是我目前拥有的代码笔：
[已编辑]
任何帮助将不胜感激！谢谢！
更新
我现在有一些基本功能正在工作。这是更新的代码：
[已编辑]
您需要关闭屏幕旋转，并且必须将手机倾斜到横向视图。我现在的新问题是如何在手机处于纵向位置以及打开屏幕旋转时使这一切正常工作。
所以我终于设法解决了这个问题，在大量研究和谷歌上一些非常有用的文章的帮助下——特别是这篇文章：
http://dev.opera.com/articles/w3c-device-orientation-usage/#demo
本质上，我最终将陀螺仪的 Tait-Bryan 角转换为旋转矩阵。这有点棘手，因为在创建从欧拉到旋转矩阵的转换时，有许多不同的可能的轴组合序列。我使用了上面文章中使用的 ZYX 组合。
然后我用另外两个矩阵转换了这个初始矩阵。第一个是围绕 z 轴旋转以说明屏幕的方向。第二个是 XZ 轴的反转，它解决了当相机向上看时 css 立方体移动方向的问题；向上看将立方体向下移动。
最后，我不得不有点hackey。立方体内部的图像与当前方向不同，因此我重新组织了图像并旋转了立方体的面。我尝试了各种旋转矩阵变换，但似乎没有什么可以在不搞砸我的控制的情况下纠正它。
希望这可能对遇到类似问题的其他人有用。
你可以在这里找到我的最终解决方案的代码：
[已编辑]