JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotate">click me</div>

<div class="normal">not relative</div>

<div class="relative">relative</div>

CSS

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    margin-bottom: 30px;
    -webkit-transform: translate3d(0,0,0);
}

.relative{
  position: relative;
  background: blue;
}

.normal{
  background: blue;
}

.rotate{
  background: green;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.rotate.flip{
  -moz-transform: rotate(540deg);
  -webkit-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}

JavaScript

$('.rotate').on('click', function(){
  $(this).toggleClass('flip');
});