JSFiddle - React, Tailwind, and code Playground

by syedgakbar

HTML

<div class="container">
  <div id="cube" class="spinning">
    <div class="figure front">
       <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>
    </div >
    <div class="figure back">
       <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>  
    </div >
    <div class="figure right">
        <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>       
    </div >
    <div class="figure left">
        <div class="rubik_cube_face">
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
            <span></span><span></span><span></span>
        </div>  
    </div >
    <div class="figure top">
        <div class="rubik_cube_face">
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
         </div>  
    </div >
    <div class="figure bottom">
        <div class="rubik_cube_face">
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
         </div>   
    </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;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px );
     -moz-transform: translateZ( -100px );
       -o-transform: translateZ( -100px );
          transform: translateZ( -100px );
}

#cube.spinning {
  -webkit-animation: spinCubeWebkit 9s infinite  linear;
     -moz-animation: spinCubeMoz    9s infinite  linear;
       -o-animation: spinCubeO      9s infinite;
          animation: spinCube       9s infinite;
}

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

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

#cube .figure {
  display: block;
  position: absolute;
  width: 196px;
  height: 196px;
  border: 2px solid black;
  line-height: 196px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  background: black;
  opacity: 1;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

#cube .front  {
  -webkit-transform: translateZ( 100px );
     -moz-transform: translateZ( 100px );
       -o-transform: translateZ( 100px );
          transform: translateZ( 100px );
}
#cube .back {
  -webkit-transform: rotateX( -180deg ) translateZ( 100px );
     -moz-transform: rotateX( -180deg ) translateZ( 100px );
       -o-transform: rotateX( -180deg ) translateZ( 100px );
          transform: rotateX(...

JavaScript

// Rubik's Cube
// By: Syed Ghulam Akbar