JSFiddle - React, Tailwind, and code Playground

by ddhboy

HTML

<button id="trigger">Trigger</button>
<div class="object" data-rotate="false"></div>

CSS

.object {
  width:25px;
  height:25px;
  background-color:#000000;
  -webkit-transition:all .4s;
  -moz-transition:all .4s;
  -o-transition:all .4s;
  -ms-transition:all .4s;
  transition:all .4s;
}
.object[data-rotate="false"]{
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  transform:rotate(0deg);
}
.object[data-rotate="true"]{
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}

JavaScript

$('#trigger').live('click',function(){
  if($('.object').attr('data-rotate') == 'true'){
    $('.object').attr('data-rotate',false);
  }
  else {
    $('.object').attr('data-rotate',true);
  }
});