JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<img src="http://placehold.it/350x150" alt="placeholder" />

CSS

img {
    /* Extend support as much as possible  */
   -webkit-transform:rotate(10deg) translate(100px,20px);
   -moz-transform:rotate(10deg) translate(100px,20px);
   -ms-transform:rotate(10deg) translate(100px,20px);
   -o-transform:rotate(10deg) translate(100px,20px);
   transform:rotate(10deg) translate(100px,20px);
}

JavaScript

position = $img.css('-webkit-transform') || $img.css('-moz-transform') || $img.css('-ms-transform') || $img.css('-o-transform') || $img.css('transform');

position = position.split('(')[1].split(')')[0].split(',');

// Concert matrix to degrees value
position = Math.round(Math.atan2(position[1], position[0]) * (180/Math.PI));


window.alert(position + " degrees");

// Grab current rotation position
var  $img,
     position;

$img = $('img');

position = $img.css('-webkit-transform') || $img.css('-moz-transform') || $img.css('-ms-transform') || $img.css('-o-transform') || $img.css('transform');

position = position.split('(')[1].split(')')[0].split(',');

// Concert matrix to degrees value
position = Math.round(Math.atan2(position[1], position[0]) * (180/Math.PI));


window.alert(position + " degrees");