JSFiddle - React, Tailwind, and code Playground

by carlosmartinezt

HTML

<div class="red"></div>

<button id="bk">bk</button>
<button id="fwd">fwd</button>

CSS

.red
{
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    height:200px;
    background:red;
    -webkit-transform: rotate(10deg);
    -webkit-transition: 0.5s linear;
    border-spacing:0px;
}
.red.bk{
    -webkit-transform: rotate(-15deg);
}
.red.fw{
    -webkit-transform: rotate(15deg);
}

JavaScript

$('#bk').click(function() {

    $('.red').animate({
        borderSpacing: -15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');
});

$('#fwd').click(function() {

    $('.red').animate({
        borderSpacing: 15
    }, {
        step: function(now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');

});