JSFiddle - React, Tailwind, and code Playground

by jmorais

HTML

<div class="perspective" onclick="toggleCard();">
    <div class="tile out">
        <div class="content">
            a
        </div>
    </div>
    <div class="tile in-top">
        <div class="content">
            a
        </div>
    </div>
    <div class="tile in-bottom">
        <div class="content">
            a
        </div>
    </div>
</div>

CSS

body {
 margin: 100px;   
}

.tile {
    position:absolute;
    width:500px;
    height:250px;
    margin:20px;
    top: 150px;
}

.out {
     background:red;  
    z-index: 3;
    
}

.in-top {
background: yellow;    
      z-index: 2;
    top: -100px;
    -moz-transform: rotateX(-180deg);
    -moz-transform-origin: 0% 100%;
    -webkit-transform: rotateX(-180deg);
    -webkit-transform-origin: 0% 100%;    
}

.in-bottom {
 background: blue;   
    z-index: -1;
}

.content {
    border: 1px black solid;   
}

/*****************************************
* Open
******************************************/

.openingTop {
    /* Webkit */
    -webkit-animation-name: open-card;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 2.75s;
    -webkit-transition-delay: 0s;
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-direction: alternate;
    /* Mozilla */
    -moz-animation-name: open-card;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 2.75s;
    -moz-transition-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
}

.openingBottom {
    /* Webkit */
    -webkit-animation-name: open-card-bottom;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 2.75s;
    -webkit-transition-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    /* Mozilla */
    -moz-animation-name: open-card-bottom;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 2.75s;
    -moz-transition-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
}

.topOpen {
    -moz-transform: rotateX(180deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotateX(180deg);
    -webkit-transform-origin: 0 0;
}
.bottomOpen {
    -moz-transform: rotateX(0deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotateX(0deg);
    -webkit-transform-origin: 0 0;    
}

/* Mozilla...

JavaScript

var open = false;
var intransition = false;

function openCard() {
    intrasition = true;
    $('.out').addClass('openingTop');
    $('.in-top').addClass('openingBottom');
    setTimeout(function() {
        $('.out').css("z-index", "2");
        $('.in-top').css("z-index", "3");
    }, 800);
    setTimeout(function(){
        $('.out').removeClass('openingTop').addClass('topOpen');
        $('.in-top').removeClass('openingBottom').addClass('bottomOpen');
        open = true;
        intrasition = false;
    }, 2750);
    
}


function closeCard() {
    intrasition = true;
    $('.out').addClass('closingTop');
    $('.in-top').addClass('closingBottom');
    
    setTimeout(function() {
        $('.out').css("z-index", "3");
        $('.in-top').css("z-index", "2");
    }, 800);
    setTimeout(function(){
        $('.out').removeClass('closingTop').removeClass('topOpen');
        $('.in-top').removeClass('closingBottom').removeClass('bottomOpen');
        open = false;
        intrasition = false;
    }, 2750);
    
}

function toggleCard() {
    
    if (intransition) { return; }
    
    if (open) {
        closeCard();
    } else {
        openCard();     
    }
}