How to get CSS transform rotation value in degrees with JavaScript

Question

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.

Can you not simply add 360 to angle if it is smaller than or = to 0? — Brian Hannay
– Brian Hannay, Commented Oct 24, 2013 at 18:56
Yes, just added an answer with my updated code. Figured it had to do with my lack of geometry knowledge. Found help here: stackoverflow.com/questions/10343448/… — jjeaton
– jjeaton, Commented Oct 24, 2013 at 19:05

danicotra · Accepted Answer · 2019-02-03 10:30:05Z

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

jjeaton · Accepted Answer · 2013-10-24 19:04:03Z

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

Collectives™ on Stack Overflow

How to get CSS transform rotation value in degrees with JavaScript

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related