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