Question

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

我使用requestAnimationFrame和本文的矩阵计算方法来实现了这一点：

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

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

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

预先加油，谢谢！

编辑：以下是适用于transformY的功能。通过添加转换：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

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

从Matrix3D获取CSS变换的rotateX角度

1 个答案: