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