Get exact rotation angle from matrix3d

Question

I have some element

<div id="element"></div>

with rotation transform style

-webkit-transform: rotateX(-1100deg);

Is there a way to get exact (-1100) rotation angle from computed styles?

window.getComputedStyle returns matrix3d.

var element = document.getElementById('element'),
    cs = getComputedStyle(element),
    matrix = new WebKitCSSMatrix(cs['-webkit-transform']);

But how to retrieve rotation angle out of this matrix?

I need computed styles because Im trying to get angle during transition of element.

Answer 1

I couldn't find an easy way to do it, but with the help of this article I managed to get the value (kind of).

var myElement = document.getElementById('element');
var myTransform = window.getComputedStyle(myElement,null)
var myTransform = myTransform.getPropertyValue("-webkit-transform");
var myTransform = myTransform.split(' ');
var myX = myTransform[6].split(",")[0];
var angle = Math.round(Math.asin(myX) * (180/Math.PI));
console.log(angle);

It returns -20, which is -360 * 3 = -1080 + the added 20 degree rotation. -20. Some guy in the comments noticed that it doesn't work when the angle is above 180deg and offered a solution , but it only works up to 360deg.

I think it would be way much easier if you use javascript to dynamically control the transformation of your elements, since there is no easier way to get the getComputedStyle value of your rotation.