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: 25vw;
    height: 25vw;
    margin: 100px auto;
    transition: transform 2s;
    background-color: gainsboro;
    animation: foo 2s linear infinite forwards;
}
.face {
    position: absolute;
    width: 25vw;
    height: 25vw;
}
.a {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: brown;
    transform: rotateX(90deg) translateZ(12.5vw);
}
.b {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: yellow;
    transform: rotateX(-90deg) translateZ(12.5vw);
}
.c {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: purple;
    transform: rotateY(90deg) translateZ(12.5vw);
}
.d {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: green;
    transform: rotateY(-90deg) translateZ(12.5vw);
}
.e {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: blue;
    transform: translateZ(-12.5vw);
}
.f {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9);
    background-color: red;
    transform: translateZ(12.5vw);
}
@keyframes foo {
    form {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

JavaScript

//Responsive 3D cube with viewport units test/demo