JSFiddle - React, Tailwind, and code Playground
HTML
<img id="rotate" src="http://www.placekitten.com/100/100" data-rotation='0' />
<button id="rotationRight" data-dojo-type="dijit.form.Button" onclick="rotateRight(90,'rotate');">Rotate Div</button>
JavaScript
function getsupportedprop(proparray) {
var root = document.documentElement //reference root element of document
for (var i = 0; i < proparray.length; i++) { //loop through possible properties
if (proparray[i] in root.style) { //if property exists on element (value will be string, empty string if not set)
return proparray[i] //return that string
}
}
}
function rotateRight(deg, rotate) {
var csstransform = getsupportedprop(['transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform']);
var el = document.getElementById(rotate);
var rotation = parseInt(el.getAttribute("data-rotation")) + deg;
if (rotation >= 360) rotation -= 360;
el.style[csstransform] = 'rotate(' + rotation + 'deg)';
el.setAttribute("data-rotation", rotation);
}