JSFiddle - React, Tailwind, and code Playground

by exoticdevil

HTML

<div id="blue" class="container" style="margin-left: 50px">
    <div class="box" id="first"></div>
  </div>
  <div id="blue" class="container" style="margin-left: 200px">
    <div class="box" id="second"></div>
  </div>

CSS

#blue {
  -webkit-perspective: 600px;
}
#blue .box {
  position: absolute;
  zoom: 0.7;
  background-color: blue;
  -webkit-transform: rotateY( 45deg );
  -webkit-transition: all .2s ease-out;
  z-index: 0; 
  height: 100px;
  width: 200px;
  margin-left: 50px;
  margin-top: 50px;
}

JavaScript

$(".box").click(function () {
            $(this).css({"-webkit-transform-style":"preserve-3d",
                         "background-color":"red",
                         "box-shadow":"0px 0px 10px red",
                         "-webkit-transition:":"all .2s ease-in",
                         "zoom":"1",
                         "z-index":"10",
                         "-webkit-transform":"rotateY(0deg)"});
                         
            $(this).mouseleave(function() {
            $(this).css({"-webkit-transform-style":"preserve-3d",
                         "background-color":"blue",
                         "box-shadow":"",
                         "-webkit-transition:":"all .2s ease-out",
                         "zoom":"",
                         "z-index":"1",
                         "-webkit-transform":"rotateY(45deg)"});
           });
        });