Javascript 当使用真实设备时，转换为css的设备方向数据表现出奇怪的行为

这个问题在继续a:
我已经创建了一个模拟手机方向的CSS小部件（）。当使用devtoolssensors选项卡时，小部件工作得很好，将事件数据转换为cssrotate3d字符串，如下所示（答案by@Andrey):

然而，如果我使用真实的设备（导航到js小提琴），我会有奇怪的行为，尤其是在纵向模式下拿着手机时。为什么呢？我怎样才能修好它

更新：
读完后，我想我的问题是我用的是欧拉角。解释得很好

但是，我仍在努力将设备方向数据（alpha、beta、gamma）转换为稳定的CSS转换

我曾考虑使用matrix3d转换，但缺乏将alpha、beta和gamma转换为4X4矩阵的数学知识

任何帮助都将不胜感激

发现在遇到问题（万向节锁）时，使用是一种方法。我找到了一个很好的方法来处理这样的数学问题：

var rad = Math.PI / 180;
window.addEventListener("deviceorientation", function(ev) {

  // Update the rotation object
  var q = Quaternion.fromEuler(ev.alpha * rad, ev.beta * rad, ev.gamma * rad, 'ZXY');

  // Set the CSS style to the element you want to rotate
  elm.style.transform = "matrix3d(" + q.conjugate().toMatrix4() + ")";

}, true);

var rad = Math.PI / 180;
window.addEventListener("deviceorientation", function(ev) {

  // Update the rotation object
  var q = Quaternion.fromEuler(ev.alpha * rad, ev.beta * rad, ev.gamma * rad, 'ZXY');

  // Set the CSS style to the element you want to rotate
  elm.style.transform = "matrix3d(" + q.conjugate().toMatrix4() + ")";

}, true);