从matrix3d获取CSS变换rotateX角度

Question

我正在开发一种工具，可让您浏览“虚拟杂志”中的内容。为了实现翻转动画，我需要能够在动画的每一帧中获取当前的旋转角度，以便在 90 度时翻转正面和背面。

我使用requestAnimationFrame 和本文中的矩阵计算得到了这个工作：

https://css-tricks.com/get-value-of-css-rotation-through-javascript/

这仅在左右翻页时有效（使用rotateY）。如果我想垂直翻转（日历样式），我需要能够计算 rotateX 的角度。

任何精通数学的人都可以在这里帮助我吗？

提前干杯和感谢！

---

编辑：这是适用于transformY 的函数。要检查的元素通过添加 transform: rotateY(-180deg) 与左变换原点来动画：

function checkTransitionProgress() {
  // SRC: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
  el = loremPages[index];
  var st = window.getComputedStyle(el, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
    st.getPropertyValue("-moz-transform") ||
    st.getPropertyValue("-ms-transform") ||
    st.getPropertyValue("-o-transform") ||
    st.getPropertyValue("transform") ||
    false;
  var values = tr.split('(')[1].split(')')[0].split(',');
  var a = values[0];
  var b = values[1];
  var c = values[2];
  var d = values[3];
  var scale = Math.sqrt(a * a + b * b);
  var sin = b / scale;
  var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

  if (direction == 'forwards') {
    if (angle < 90) {
      window.requestAnimationFrame(checkTransitionProgress);
    } else {
      target.style.zIndex = index;
      target.frontSide.classList.remove('lorem__side--in-front');
      target.backSide.classList.add('lorem__side--in-front');
    }
  } else {
    if (angle > 90) {
      window.requestAnimationFrame(checkTransitionProgress);
    } else {
      target.style.zIndex = targetInvertedIndex;
      target.frontSide.classList.add('lorem__side--in-front');
      target.backSide.classList.remove('lorem__side--in-front');
    }
  }
}
checkTransitionProgress();

Answer 1

我自己想出来的。对于rotateX，您必须使用a = values[5] 和b = values[4]。