I'm working on a tool that lets you browse through content in a "virtual magazine". In order to realize the turn-over animation, I need to be able to get the current rotation angle during every frame of the animation, in order to flip front- and backside when it's at 90 degrees.
I got this to work, using requestAnimationFrame
and the matrix calculation from this article:
https://css-tricks.com/get-value-of-css-rotation-through-javascript/
This only works, when turning over pages left and right though (with rotateY
). If I want to turn over vertically (calender style) I need to be able to calculate the angle for rotateX
.
Can anyone math savvy help me out here?
Cheers and thanks in advance!
Edit: Here is the function that works for transformY
. The element to be checked gets animated by adding transform: rotateY(-180deg)
with a transform origin of 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();
Figured it out myself. You have to use a = values[5]
and b = values[4]
for rotateX
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.