JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="threedee-context">
    <div class="grid">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

CSS

.threedee-context {
    -webkit-transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 400;
}
.grid {
    height: 100%;
    width: 300px;
    margin: 200px auto;
    -webkit-animation: spin 5s linear infinite;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 400;
}
.cell {
    height: 100px;
    width: 100px;
    float: left;
    background: #eee;
    -webkit-animation: flipper 2s infinite;
    -webkit-transform: rotateX(50deg);
}
.cell:nth-child(2n) {
    background: #ccc;
    -webkit-animation-delay: 1s;
    -webkit-transform: rotateX(50deg);
}
.cell:nth-child(3n + 1) {
    clear: left;
}
@-webkit-keyframes flipper {
    0%, 100% {
        -webkit-transform: rotateX(50deg);
    }
    50% {
        -webkit-transform: rotateX(-50deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
    }
}