JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="red"></div>
    <div class="blue" id="blue"></div>
</div>

CSS

* {
    box-sizing: border-box;
}
div > div {
    height: 50px;
    width: 300px;
}
.main {
    margin: 20px;
    position: relative;
}
.blueParent {
    
}
.blue {
    background-color: blue;
    /* position: absolute;
    top: 0;
    left: 0; 
    transform: rotate(180deg) translate(0,0);
    transform-origin: 25px 25px; */ 
    background-color: blue;
    transform: rotate(0deg) translate(0,-50px);
    transform-origin: 25px -25px;
    
}
.blue:hover {
    animation: rotate 5s linear infinite reverse;
}

.red {
    background-color: red;
}

@keyframes rotate {
  0 { transform: rotate(-90deg) translate(0,-50px); }
  25% { transform: rotate(-180deg) translate(0,-50px); }
  50% { transform: rotate(-270deg) translate(0,-50px); }
  100% { transform: rotate(-360deg) translate(0,-50px); }
}

JavaScript

$(function(){ 
  var blueDivOffset = $(".blue").offset();
  var blueDivOffsetTop = blueDivOffset.top;     //20
  var blueDivOffsetLeft = blueDivOffset.left;   //28
  
  function rotate() {
    //console.log(blueDivOffsetTop); 
    //console.log(blueDivOffsetLeft);
    
    if( 0 < blueDivOffsetTop < 20 ) {
      var operation = 20 - blueDivOffsetTop;
      $(".blue").css({"margin-top": operation+"px"});
    } else if (blueDivOffsetTop < 0){
      var operation = 20 + (-1) * blueDivOffsetTop;
      $(".blue").css({"margin-top": operation+"px"});
    } else {
      $(".blue").css({"margin-top": 0});
    }
    
    if( 0 < blueDivOffsetLeft < 28 ) {
      var operation = 28 - blueDivOffsetLeft;
      $(".blue").css({"margin-left": operation+"px"});
      //console.log("hi");
    } else if (blueDivOffsetLeft < 0){
      var operation = 28 + (-1) * blueDivOffsetLeft;
      $(".blue").css({"margin-left": operation+"px"});
    } else {
      $(".blue").css({"margin-left": 0});
    }
    var margLeft = $(".blue").css("margin-left");
    console.log(margLeft);
  }
  
  $(".blue").hover(function(e){
    to = window.setInterval(rotate, 1);
  },function(e) {
    window.clearInterval(to);
  });
  //setInterval(rotate, 1);
});