JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<section class="preserve3d">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

SCSS

.preserve3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

div {
    display: inline-block;
    width: 430px;
    height: 150px;
    background: #000;
    margin: 10px;
}
div {
    animation: tile-in 500ms ease 1 forwards;
    opacity: 0;
    @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
            animation-delay: #{$i * 50}ms;
        }
    }
}

@keyframes tile-in {
    0% {
        transform: translateZ(200px) rotateZ(-5deg) translateY(-20px) translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}