JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="container">
    <div id="bg">
     clickeame
    </div>
</div>

CSS

body {
    padding: 20px;
    font-family: 'Helvetica Neue';
    font-size: 24px;
}

#container {
    -webkit-perspective: 650px;
       -moz-perspective: 650px;
         -o-perspective: 650px;
            perspective: 650px;
}

#bg {
    background: #EEE;
    padding: 20px;
    text-align: center;
    border: 1px solid #222;
    height: 200px;
}

@keyframes effect {
    20% {
    -webkit-transform: rotateX(25deg) scale(0.95) translate(0px, -40px);
       -moz-transform: rotateX(25deg) scale(0.95) translate(0px, -40px);
         -o-transform: rotateX(25deg) scale(0.95) translate(0px, -40px);
            transform: rotateX(25deg) scale(0.95) translate(0px, -40px);
    }    
    100% {
    -webkit-transform: rotateX(0deg) scale(0.95) translate(0px, -20px);
       -moz-transform: rotateX(0deg) scale(0.95) translate(0px, -20px);
         -o-transform: rotateX(0deg) scale(0.95) translate(0px, -20px);
            transform: rotateX(0deg) scale(0.95) translate(0px, -20px);
    }
} 

.effect {
   animation: effect 2.8s;    
}

JavaScript

$(document).ready(function(){
    $('#bg').click(function(){
        $(this).toggleClass('effect');
    });
});