JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="container">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
</div>
<button class="flip">Flip</button>

CSS

.container, .front, .back {
    width:100px;
    height: 200px;
}
.container {
    position: relative;
    -webkit-transform-style: preserve-3d;
  -webkit-transition: 1s;
    //-webkit-transform: rotatey(180deg);
}
button.flip {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.face {
    width: 100%;
    height: 100%;
    position: absolute;
    
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 2em;
    text-align: center;
    line-height: 200px;
}
.front {
    background-color: #0e0e0e;
    color: #ededed;
}
.back {
    background-color: #ededed;
    -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      transform: rotateY(180deg);
}
.container.active {
        
}

.container.active .front, 
.container.active .front:after,
.container.active .back:after,{
    -webkit-animation: front 650ms 0s 1 linear forwards;
      -moz-animation:    front 650ms 0s 1 linear forwards;
      -o-animation:      front 650ms 0s 1 linear forwards;
      animation:         front 650ms 0s 1 linear forwards;
}

.container.active .back {
    
    -webkit-animation: back 650ms 0s 1 linear forwards;
    -moz-animation:    back 650ms 0s 1 linear forwards;
    -o-animation:      back 650ms 0s 1 linear forwards;
    animation:         back 650ms 0s 1 linear forwards;
}

.container.active .front:after,
.container.active .back:after {
    -webkit-animation-name: shadow;
    -moz-animation-name:    shadow;
    -o-animation-name:      shadow;
    animation-name:         shadow;
}

.container.active .front,
.container.active .back,
.container.active .front:after,
.container.active .back:after {
    -webkit-animation-play-state: running;
    -moz-animation-play-state:    running;
   ...

JavaScript

$(function(){
    $('button.flip').on('click', function(){
        $('.container').toggleClass('active');
    });
});