I'm using the code found at CSS-Tricks to get the current rotation transform (in CSS) with JavaScript.

JavaScript function:

function getCurrentRotation( elid ) {

  var el = document.getElementById(elid);

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

       fail...;



  if( tr !== none) {

    console.log('Matrix: ' + tr);



    var values = tr.split('(')[1];

      values = values.split(')')[0];

      values = values.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);



    // arc sin, convert from radians to degrees, round

    /** /

    var sin = b/scale;

    var angle = Math.round(Math.asin(sin) * (180/Math.PI));

    /*/

    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

    /**/



  } else {

    var angle = 0;

  }



  // works!

  console.log('Rotate: ' + angle + 'deg');

  $('#results').append('<p>Rotate: ' + angle + 'deg</p>');

}

According to the post, this works, however, for values over 180 degrees, I get negative numbers, and 360deg returns zero. I need to be able to correctly return the degree value from 180-360 degrees.

What am I doing wrong with this code that won't let it return the correct degree turn over 180 degrees?

It will make a lot more sense if you view the demo: See the pen for a demo of this in action.