JSFiddle - React, Tailwind, and code Playground

by cssGuy

HTML

<div id="wrap">
    <div id="cube">
        <div class="face a"></div>
        <div class="face b"></div>
        <div class="face c"></div>
        <div class="face d"></div>
        <div class="face e"></div>
        <div class="face f"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    font: bold 200%/1.5 sans-serif;
}
body::before {
    content:"3D cube expirement";
    display: block;
    text-align: center;
}
#wrap {
    perspective: 900px;
    transform-style: preserve-3d;
}
#cube {
    transform-style: preserve-3d;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: transform 2s;
    background-color: gainsboro;
    animation: foo 2s linear infinite forwards;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}
.a {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #33E278;
    transform: rotateX(90deg) translateZ(100px);
}
.b {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #3CC362;
    transform: rotateX(-90deg) translateZ(100px);
}
.c {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #69FFC6;
    transform: rotateY(90deg) translateZ(100px);
}
.d {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #45E833;
    transform: rotateY(-90deg) translateZ(100px);
}
.e {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #38C77B;
    transform: translateZ(-100px);
}
.f {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: #40DA40;
    transform: translateZ(100px);
}
@keyframes foo {
    form {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}