JSFiddle - React, Tailwind, and code Playground

by blue1086

HTML

<div class="card">
    TestCard
</div>
<div class="card">
    TestCard
</div>
<div class="card">
    TestCard
</div>

CSS

body {
    -webkit-perspective: 200;
    perspective: 200;
}

.card {
    color:white;background:black;
    width: 300px;
    height:150px;
    -webkit-transform-origin: left center;
    -webkit-transform: rotateY(-20deg);
    opacity: 0;
    
    -webkit-transition: all 0.3s ease;
}

.visible {
    -webkit-transform: rotateY(0deg) !important;
    opacity: 1 !important;
}

JavaScript

var elems = document.getElementsByClassName('card'),
    on = 0;

function card () {
    elems[on].classList.add('visible');
    on += 1;
    if(on > elems.length - 1){return;}
    setTimeout(card, 100);
}

card();