JSFiddle - React, Tailwind, and code Playground

by syedgakbar

HTML

<div class="container">
  <div id="cube">
    <div class="figure front"></div >
    <div class="figure back"></div >
    <div class="figure right"></div >
    <div class="figure left"></div >
    <div class="figure top"></div >
    <div class="figure bottom"></div>
  </div>
</div>

CSS

.container {
  width: 200px;
  height: 200px;
  position: relative;
   margin: 70px auto 40px;
  -webkit-perspective: 2000px;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px );
  -webkit-animation: spinCubeWebkit 9s infinite  linear;
}
#cube .figure{
  width: 196px;
  height: 196px;
  display: block;
  background: black;
  position: absolute;
  border: 2px solid black;
  opacity:0.6;
}
#cube .front  { 
    -webkit-transform: rotateY(   0deg ) translateZ( 100px ); 
    background: red;
}
#cube .back   { 
    -webkit-transform: rotateX( 180deg ) translateZ( 100px ); 
    background: blue;
}
#cube .right  { 
    -webkit-transform: rotateY(  90deg ) translateZ( 100px ); 
    background: green;
}
#cube .left   { 
    -webkit-transform: rotateY( -90deg ) translateZ( 100px ); 
    background: yellow;
}
#cube .top    { 
    -webkit-transform: rotateX(  90deg ) translateZ( 100px ); 
    background: white;
}
#cube .bottom { 
    -webkit-transform: rotateX( -90deg ) translateZ( 100px ); 
    background: orange;
}

@-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); }
}