JSFiddle - React, Tailwind, and code Playground

by vaibviad

HTML

<div class="cards"></div>

CSS

body{
    position: relative;
}
.cards{
    margin:30px;
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:200px;
    height:200px;
    background-color:#5000FF;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    position:absolute;
    cursor:pointer;
    /* Animate the transitions */
    -webkit-transition:0.8s; text-align:center;
    -moz-transition:0.8s; text-align:center;
    -ms-transition:0.8s; text-align:center;
    -o-transition:0.8s; text-align:center;
    transition:0.8s; text-align:center;
    
}

.flip{
  transform:rotateY(180deg) scale(0.2,0.2);
  -webkit-transform:rotateY(180deg) scale(0.2,0.2);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  background-color:#FF5959;
    
}

JavaScript

$(".cards").click(function(){
    $(this).toggleClass("flip"); 
});