JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="canvas">
    <div id="b-1-t" class="f-top"></div>
    <div id="b-1-b" class="f-bottom"></div>
    <div id="b-1-r" class="f-right"></div>
    <div id="b-1-f" class="f-front"></div>
</div>

SCSS

html, body {
    background-color: #ddd;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 16px;
}
* {
    box-sizing: border-box;
}
.canvas {
    perspective: 125vw;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    div {
        position: absolute;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        background-color: #999;
        transition: top 500ms ease-in-out, left 300ms ease-in-out;
    }
    .f-top {
        transform: rotateX(90deg);
        transform-origin: bottom;
    }
    .f-right {
        transform: rotateY(90deg);
        transform-origin: left;
    }
    .f-bottom {
        transform: rotateX(90deg);
        transform-origin: bottom;
    }
}
$b1y=10px;
$b1x=100px;
 #b-1-t {
    background-color: #4e81aa;
    z-index: 1;
    width: 100px;
    height: 100px;
    top: $b1y - 100px;
    left: $b1x;
}
#b-1-f {
    background-color: #63c661;
    z-index: 3;
    width: 100px;
    height: 300px;
    top: $b1y;
    left: $b1x;
}
#b-1-r {
    background-color: #eddf65;
    z-index: 2;
    width: 100px;
    height: 300px;
    top: $b1y;
    left: 100px + $b1x;
}
#b-1-b {
    background-color: #cc5b5b;
    z-index: 1;
    width: 100px;
    height: 100px;
    top: $b1y - 100px + 300px;
    left: $b1x;
}
.canvas:hover{
$b1y=500px;
$b1x=250px;
 #b-1-t {
    top: $b1y - 100px;
    left: $b1x;
}
#b-1-f {
    top: $b1y;
    left: $b1x;
}
#b-1-r {
    top: $b1y;
    left: 100px + $b1x;
}
#b-1-b {
    top: $b1y - 100px + 300px;
    left: $b1x;
}
}

JavaScript

/**
 * CUBE
 */