title: How to get CSS transform rotation value in degrees with JavaScript
body: <p>I'm using the code <a href="http://css-tricks.com/get-value-of-css-rotation-through-javascript/" rel="noreferrer">found at CSS-Tricks</a> to get the current rotation transform (in CSS) with JavaScript.</p>
  
  <p>JavaScript function:</p>
  
  <pre><code>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('&lt;p&gt;Rotate: ' + angle + 'deg&lt;/p&gt;');
  }
  </code></pre>
  
  <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.</p>
  
  <p>What am I doing wrong with this code that won't let it return the correct degree turn over 180 degrees?</p>
  
  <p>It will make a lot more sense if you view the demo: <a href="http://codepen.io/jjeaton/pen/bzolH" rel="noreferrer">See the pen for a demo of this in action</a>.</p>