JSFiddle - React, Tailwind, and code Playground

by Web Carvers

HTML

<div class="cube">
    <div class="side1 front"></div>
    <div class="side1 back"></div>
    <div class="side2 right"></div>
    <div class="side2 left"></div>
    <div class="side3 top"></div>
    <div class="side3 bottom"></div>
</div>

CSS

.cube {
    position:relative;
    float:left;
    width: 200px;
    height: 400px;
    margin-top:100px;
    margin-left:300px;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
    -webkit-transition: all 0.5s !important;
    -ms-transition: all 0.5s !important;
    -o-transition: all 0.5s !important;
    transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    /* Safari and Chrome */
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -ms-transition-timing-function: ease-in;
    -webkit-transform: rotateY(0deg) rotateX(70deg) rotateZ(30deg);
    -webkit-transform-origin: 0 0 0;
    -webkit-perspective: 5000px; /* Chrome, Safari, Opera */
}
.side1, .side2, .side3 {
    position: absolute;
}
.side1 {
    width:200px;
    height:400px;
}
.side2 {
    width:50px;
    height:400px;
}
.side3 {
    width:200px;
    height:50px;
}

.front {
    -webkit-transform: translateZ(25px);
    background:black;
}
.back {
    -webkit-transform: rotateY(-180deg) translateZ(25px);
    background:red;
}
.right {
    -webkit-transform: rotateY(90deg) translateZ(175px);
    background:green;
}
.left {
    -webkit-transform: rotateY(-90deg) translateZ(25px);
    background:aqua;
}
.top {
    -webkit-transform: rotateX(90deg) translateZ(25px);
    background:lime;
}
.bottom {
    -webkit-transform: rotateX(-90deg) translateZ(375px);
    background:#999;
}

JavaScript

/*
Front:
       Height = h,
        Width = w
        Depth = d
        
  Translate z = (d/2)
  
Back:
       Height = h,
        Width = w
        Depth = d
        
  Translate z = (d/2)
     Rotate y = -180deg
  
Right:
        Width = d (Depth),
       Height = h
       
     Rotate y = 90deg
  Translate z = h - (d/2)

Left:
        Width = d (Depth),
       Height = h
       
     Rotate y = -90deg
  Translate z = (d/2)

Top:
        Width = w,
       Height = d (Depth)
       
     Rotate x = 90deg
  Translate z = (d/2)

Bottom:
        Width = w,
       Height = d (Depth)
       
     Rotate x = -90deg
  Translate z = w - (d/2)
*/