Getting rotate3d values with Javascript / jQuery

Question

Having an element with the following transformation:

style="transform: rotate3d(1, 0, 0, -50deg);"

I want to be able to get the value -50 with Javascript/jQuery. I want to get the absolute value, so if it is 370deg, i do not want to get 10, but 370.

Using $('#element').css('transform') returns a matrix like this:

matrix3d(1, 0, 0, 0, 0, 0.642788, -0.766044, 0, 0, 0.766044, 0.642788, 0, 0, 0, 0, 1)

Which can be better represented as:

matrix3d(
    1, 0, 0, 0, 
    0, 0.642788, -0.766044, 0, 
    0, 0.766044, 0.642788, 0,
    0, 0, 0, 1
)

Is solving the equations the only way to get this value?

Knowing that Z =0 and X =1 as rotate3d(1, 0, 0, -50deg);

Isn't there any faster alternative to this?

Answer 1

I should have payed a bit more attention to it. After a while I realized this can not be solved mathematically. Not if I want to get the exact absolute degrees and not the relative ones.

The matrix we get with a transformation of 370 degrees is exactly the same one we get with a transformation of 10 degrees. Therefore it is impossible to get two different resulting values for alpha with the exact same input.

with transform: rotate3d(1, 0, 0, 10deg); we get:

matrix3d(1, 0, 0, 0, 0, 0.984808, 0.173648, 0, 0, -0.173648, 0.984808, 0, 0, 0, 0, 1)

And with transform: rotate3d(1, 0, 0, 370deg); the exact same one:

matrix3d(1, 0, 0, 0, 0, 0.984808, 0.173648, 0, 0, -0.173648, 0.984808, 0, 0, 0, 0, 1)

Reproduction online