从matrix3d获取CSS变换rotateX角度

Question

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

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

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

这只适用于左右翻页（使用rotateY）。如果我想垂直翻转（日历样式）我需要能够计算rotateX的角度。

任何数学家都能帮助我解决这个问题吗？

欢呼并提前致谢！

---

编辑：这是适用于transformY的功能。要检查的元素通过添加transform：rotateY(-180deg)以及变换原点left来获得动画：

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

自己搞清楚了。你必须使用a = values[5]和b = values[4]为rotateX。