JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="scene">
<div class="cube" style="float: left;margin:0 0 20px 60px;">
    <div class="cube-face  cube-face-front"></div>
    <div class="cube-face  cube-face-back"></div>
    <div class="cube-face  cube-face-left"></div>
    <div class="cube-face  cube-face-right"></div>
    <div class="cube-face  cube-face-top"></div>
    <div class="cube-face  cube-face-bottom"></div>
 </div>
</div>

CSS

.scene {
  display: inline-block;
  margin-top: 50px;
  width: 150px;
  height: 150px;
  
  perspective: 600px;
}
.cube:hover{
  transform: rotateY(360deg) rotateX(360deg);
 
}
.cube {
  position: relative;
  width: inherit;
  height: inherit;
  
  transform-style: preserve-3d;
transition: 10s all ease;
}
.cube-face {
  width: inherit;
  height: inherit;
  position: absolute;
  background: red;
  opacity: 0.8;
}
// faces
.cube-face-front {
  background: yellow;
  transform: translate3d(0, 0, 75px);
}  
.cube-face-back {
  background: black;
  transform: rotateY(180deg) translate3d(0, 0, 75px);
} 
.cube-face-left {
  background: green;
  transform: rotateY(-90deg) translate3d(0, 0,75px);
} 
.cube-face-right {
  background: magenta;
  transform: rotateY(90deg) translate3d(0, 0, 75px);
} 
.cube-face-top {
  background: blue;
  transform: rotateX(90deg) translate3d(0, 0, 75px);
} 
.cube-face-bottom {
  background: red;
  transform: rotateX(-90deg) translate3d(0, 0, 75px);
}