Getting CSS transform rotateX angle from matrix3d

Question

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();

crusted_franklin crusted_franklin · Accepted Answer · 2018-07-24T13:18:40

0

votes

Figured it out myself. You have to use a = values[5] and b = values[4] for rotateX.

Getting CSS transform rotateX angle from matrix3d

1 Answers