JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="container">
    <div class="box show-top">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face left">L</div>
        <div class="face right">R</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
    </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.container {
  width: 200px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: solid 2px grey;
  position: relative;
  perspective: 1000px;
}
.box .face {
  display: block;
  position: absolute;
  border: 2px solid black;
}
.box .front  { background-color: rgba(256, 0, 0, .35); }
.box .back   { background-color: rgba(0, 256, 0, .35); }
.box .right  { background-color: rgba(0, 0, 256, .35); }
.box .left   { background-color: rgba(126, 0, 0, .35); }
.box .top    { background-color: rgba(0, 126, 0, .35); }
.box .bottom { background-color: rgba(0, 0, 126, .35); }

.box {
  width: 100%;
  height: 100%;
  transition: transform 3s;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.face {
  backface-visibility: hidden;
}
.container:hover .box {
  transform: translateZ(-50px) rotateY(180deg) rotateX(-120deg);
}
/*
.box .front  { width: 100%; height: 100%; }
.box .back   { width: 100%; height: 100%; transform: rotateX( -180deg ); }
.box .left   { width: 10px; height: 100%; transform: rotateY( -90deg ); }
.box .right  { width: 10px; height: 100%; transform: rotateY( 90deg ); }
.box .top    { width: 100%; height: 10px; transform: rotateX( 90deg ); }
.box .bottom { width: 100%; height: 10px; transform: rotateX( -90deg ); } */
.box .front  { width: 100%; height: 100%; }
.box .back   { width: 100%; height: 100%; transform: rotateX( -180deg ); }
.box .left   { width: 10px; height: 100%; left: -10px; transform: rotateY( -90deg ); transform-origin: 50% 0%; }
.box .right  { width: 10px; height: 100%; right: -10px; transform: rotateY( 90deg ); transform-origin: 50% 100%; }
.box .top    { width: 100%; height: 10px; top: -10px; left: 0px; }
.box .bottom { width: 100%; height: 10px; bottom: -10px; left: 0px;  }