How to get CSS transform rotation value in degrees with JavaScript
Found the answer in another SO question, you have to add (2 * PI) if the result in radians is less than zero.
This line:
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
Needs to be replaced with this:
var radians = Math.atan2(b, a);
if ( radians < 0 ) {
radians += (2 * Math.PI);
}
var angle = Math.round( radians * (180/Math.PI));
I came in need of something like this too and decided to start from the initial code, doing a little clean up and some little improvement; then I modified as for the OP needing, so I wanted to share it here now:
function getCurrentRotation(el){
var st = window.getComputedStyle(el, null);
var tm = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"none";
if (tm != "none") {
var values = tm.split('(')[1].split(')')[0].split(',');
/*
a = values[0];
b = values[1];
angle = Math.round(Math.atan2(b,a) * (180/Math.PI));
*/
//return Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI)); //this would return negative values the OP doesn't wants so it got commented and the next lines of code added
var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
}
return 0;
}
Use it like this:
getCurrentRotation(document.getElementById("el_id"));