JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<p id="rotatebox">
<img src="http://placehold.it/150x150" />
   ABC
</p>

<a href="#" id="btn">Click here to get the angle</a>

http://css-tricks.com/get-value-of-css-rotation-through-javascript/

CSS

p{
    margin:3rem;
}
#btn{
    padding:1em;
    background-color:#eee;
}

JavaScript

$("#rotatebox").css("webkitTransform",'rotate(45deg)')

$("#btn").click(function(){
    alert(getAngle());

});
function getAngle(){
var tr = $("#rotatebox").css("webkitTransform");
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
// DO NOT USE: see update below
var sin = b/scale;
var angle = Math.round(Math.asin(sin) * (180/Math.PI));

// works!
console.log('Rotate: ' + angle + 'deg');
    return angle;
}