JSFiddle - React, Tailwind, and code Playground

by syedgakbar

HTML

<div class="container">
  <div id="cube" class="spinning">
    <div class="figure front">
       <div class="loader">
            <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="loader">
            <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="loader">
            <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="loader">
            <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="loader">
                <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="loader">
                <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: 60px 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 6s infinite  linear;
         -moz-animation: spinCubeMoz    6s infinite  linear;
           -o-animation: spinCubeO      6s infinite;
              animation: spinCube       6s 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;
    }

    #cube.panels-backface-invisible .figure {
      -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:...

JavaScript

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