rematrix | Matrix transformations | Math library

First of all, I am not a mathematical expert at all. Please be tolerant to my mathematical mistakes and correct me where necessary, I'd love to learn.

I have a cube which is rotating using css animations with transform: matrix3d(4x4). I can also manually rotate the cube, converting user actions to the same matrix3d transformations.

What I want is a rotating cube with css when the user stops interacting that starts from where the user left it. This is something I am successfully doing by getting the cube's transform matrix3d value and using multiplication to set the css's keyframes dynamically.

However when the user starts interacting with the cube, the cube jumps to its last known manual rotation point and continues from there since I can't figure out how to get the rotation on X and Y axis from the 4x4 matrix.

I am currently using the following library, Rematrix, which helps me in the part to go from manual rotation to css rotation, as described above.

I've been looking into articles about Euler, and how to go from Euler to matrixes and visa versa but like I mentioned before, this is where my lack of mathematical knowledge is holding me back I think. I can't seem to figure it out.

As a reference, here are some of the articles I've read to try and solve my problem.

• https://medium.com/@behreajj/3d-rotations-in-processing-vectors-matrices-quaternions-10e2fed5f0a3
• http://www.gregslabaugh.net/publications/euler.pdf
• https://www.learnopencv.com/rotation-matrix-to-euler-angles/
• https://css-tricks.com/get-value-of-css-rotation-through-javascript/

The last source makes the most sense to me but, if I'm correct, is not useful in this case since it is about 2D transformations, and not 3D.

I get the current matrix3d the following way:

I am trying to make a function that uses Css matrix3d to transform elements on scroll. I am using the rematrix library found here ReMatrix to calculate the matrix then using a percentage progress in the onscroll function to calculate the percentage that the element has moved through the scene. All of this works fine.

The issue is when rotating the element seems to shrink and then grow back to normal size through the progress of the scene. Is this the expected behavior of matrix3d?

The some of the initial values in 3dmatrix are 1 so I am accounting for that by adding 1 then subtracting 1. It works fine for everything except rotation.

Am I missing something in the math here that I am too stupid to figure out it starts and ends on the correct value but shrinks and grows throughout the scene.

Here is an example fiddle and snippet Fiddle Demo

Note: I am just using 700px for scene progress in the demo. You can ignore the effects after scrolling 700px or when the box rotates past 90deg this is just a demo.