JSFiddle - React, Tailwind, and code Playground

by georeith

HTML

<div class="cube">cube 1</div>
<div id="cube2" class="cube">cube 2</div>
<button id="rotate_cw">Rotate it</button>

CSS

.cube {
    width: 100px;
    height: 100px;
    background: #FF0000;
    margin: 30px auto;
    color: #FFF;
    line-height: 100px;
    text-align: center;
}

#cube2 {
    background: #009911;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

#rotate_cw {
    margin: auto;
    display: block;
}

JavaScript

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle;
}

$(document).on('click', '#rotate_cw', function() {
   $(".cube").each(function() {
       var target = $(this);
       var rotation = getRotationDegrees(target) + 5;
       target.css({
          '-webkit-transform': 'rotate(' + rotation + 'deg)'
       ,  '-moz-transform': 'rotate(' + rotation + 'deg)'
       ,  '-o-transform': 'rotate(' + rotation + 'deg)'
       ,  '-ms-transform': 'rotate(' + rotation + 'deg)'
       ,  'transform': 'rotate(' + rotation + 'deg)'
       });
   });
});