JSFiddle - React, Tailwind, and code Playground

by christianmenz

HTML

<div class="canvas">
    <div class="front face"></div>
    <div class="back face"></div>
    <div class="top face"></div>
    <div class="bottom face"></div>
    <div class="left face"></div>
    <div class="right face"></div>
</div>

CSS

.canvas {   
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
    margin:50px;
}
.face {
    background-color:blue;
    width:100px;
    height:100px;
    position:absolute;
    border:1px solid black;
}
.front {
    transform: translateZ(50px);
    -webkit-transform:translateZ(50px);
    background-color:blue;
}
.back {
    background-color:red;
    transform: rotateX(180deg) translateZ(50px);
    -webkit-transform:rotateX(180deg) translateZ(50px);
}
.top {
    background-color:green;
    transform: rotateX(90deg) translateZ(50px);
    -webkit-transform:rotateX(90deg) translateZ(50px);
}
.bottom {
    background-color:purple;
    transform: rotateX(-90deg) translateZ(50px);
    -webkit-transform:rotateX(-90deg) translateZ(50px);
}
.left {
    background-color:yellow;
    transform: rotateY(-90deg) translateZ(50px);
    -webkit-transform:rotateY(-90deg) translateZ(50px);
}
.right {
    background-color:salmon;
    transform: rotateY(90deg) translateZ(50px);
    -webkit-transform:rotateY(90deg) translateZ(50px);
}