rotate matrix java_从matrix3d获取CSS转换rotateX角度

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

这只适用于左右翻页(使用 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();