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

【问题标题】：Device orientation data transformed to css behaves strange when using a real device使用真实设备时，转换为 css 的设备方向数据表现得很奇怪
【发布时间】：2019-06-18 14:45:39
【问题描述】：

这个问题在继续previous one:
我创建了一个模仿手机方向的 CSS 小部件 (js fiddle)。使用 dev-tools 传感器选项卡时，小部件可以完美运行，将事件数据转换为 CSS rotate3d 字符串，如下所示（@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 fiddle），我会出现奇怪的行为，尤其是在竖屏模式下握住手机时。这是为什么？我该如何解决？

更新：
阅读this answer 后，我想我的问题是我使用的是欧拉角。 This video 解释的很好。

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript css mobile orientation sensors

【解决方案1】：

发现使用Quaternion 是遇到该问题（Gimbel 锁）时要走的路。我找到了一个出色的 npm library 来处理数学，如下所示：

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

【讨论】：