JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>
<span class="cb">Some Text</span>

CSS

.cb {background-color:#ffffff;padding:10px;display:block;margin-bottom:1px;
transform: perspective(50em) rotateY(-90deg);
transform-origin: top center; 
transition:all 1s ease;}

.ob {transform: rotateY(0deg); 
transition:all 1s ease;}

JavaScript

var blinds = document.getElementsByClassName('cb');

for (let i = 0; i < blinds.length; i++) {
  loop(i);
}

function loop(i){
  setTimeout(function(){
    blinds[i].className = "cb ob";
  }, 200 * i)
}