JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.red {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: red;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
}

JavaScript

var red = $('.red');
    
    $.fn.rotate = function(start, end, duration) {
        console.log(this);
        var _this = this;
        var fakeDiv = $("<div />");
        _this.promise().done(function(){
            _this.animate({"a":end},{duration:duration});
            fakeDiv.css("height", start).animate({
                height: end
            }, {
                duration: duration,
                step: function(now) {
                    _this.css("transform", "rotate(" + now + "deg)");
                },
                complete: function() {
                    fakeDiv.remove();
                }
            });
        });

        return _this;
    };
    
    red.click(function() {
        if ( !$(this).is(':animated') ) {
        
            red.rotate(45,135,500);
            setTimeout(function(){
                red.rotate(135,190,500);
            },750);
            setTimeout(function(){
                red.rotate(190,45,500);
            },1500);
        }
    });