JSFiddle - React, Tailwind, and code Playground
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);
border-spacing:0px;
}
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');
});