转换为 css 的设备方向数据在使用真实设备时表现得很奇怪

Question

这个问题在继续上一个：
我创建了一个模仿手机方向的CSS小部件(js fiddle(。使用 dev-tools 传感器选项卡时，小部件可以完美运行，将事件数据转换为 CSS rotate3d 字符串，如下所示(答案 by@Andrey(：

function degreesToRadians (deg) {
    return deg * Math.PI / 180;
}
class EulerAngles {
  constructor(alpha, beta, gamma) {
    this.alpha = alpha;
    this.beta = beta;
    this.gamma = gamma;
  }
  toRotate3DString() {
    const gammaAxisY = -Math.sin(degreesToRadians(this.beta));
    const gammaAxisZ = Math.cos(degreesToRadians(this.beta));
    const axis = {
      alpha: [0, 1, 0],
      beta: [-1, 0, 0],
      gamma: [0, gammaAxisY, gammaAxisZ]
    };
    return (
      "rotate3d(" +
      axis.alpha.join(",") +
      "," +
      this.alpha +
      "deg) " +
      "rotate3d(" +
      axis.beta.join(",") +
      "," +
      this.beta +
      "deg) " +
      "rotate3d(" +
      axis.gamma.join(",") +
      "," +
      this.gamma +
      "deg)"
    );
  }
}

但是，如果我使用真实设备(导航到js小提琴(，我会得到奇怪的行为，尤其是在纵向模式下握住手机时。为什么？我该如何解决它？

更新：
看完这个答案，我想我的问题是我使用的是欧拉角。这个视频很好地解释了它。

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

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

任何帮助将不胜感激。

Answer 1

发现在遇到该问题(云台锁(时，使用四元数是要走的路。我找到了一个优秀的 npm 库来处理数学，如下所示：

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);