The cubes

index.html

<div class="container">
  <div id="cube">
    <div class=""><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a1"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a2"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a3"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a4"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a5"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a6"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a7"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a8"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a9"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="a10"><div class="front">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    
    <div class=""><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b1"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b2"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b3"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b4"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b5"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b6"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b7"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b8"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b9"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="b10"><div class="left">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    
    <div class=""><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c1"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c2"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c3"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c4"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c5"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c6"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c7"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c8"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c9"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
    <div class="c10"><div class="top">THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES<br/>THE CUBES</div></div>
  </div>
</div>

style.css

body {
  padding-left: 30%;
  padding-top: 5%;
  background-color: black;
}

.container {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotatecube linear 12s infinite;
  
  -moz-transform-style: preserve-3d;
  -moz-animation: rotatecube linear 12s infinite;
}

#cube > div {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  border: none;
  font-size: 30px;
  font-weight: bold;
  color: rgba(0, 170, 255, 0.4);
}

.a {
  display: block;
  color: #0af;
  /*opacity: 0.5;*/
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
}


@for $i from 1 to 10 {
  .a#{$i} {
  -webkit-transform-style: preserve-3d;
  -moz-transform: translateZ(-$i * 20px);
  -webkit-transform: translateZ(-$i * 20px);
  }
  .b#{$i} {
  -webkit-transform-style: preserve-3d;
  -moz-transform: translateX($i * 20px);
  -webkit-transform: translateX($i * 20px);
  }
  .c#{$i} {
  -webkit-transform-style: preserve-3d;
  -moz-transform: translateY($i * 20px);
  -webkit-transform: translateY($i * 20px);
  }
}



@-webkit-keyframes rotatecube {
  from { -webkit-transform: rotateX(0deg) rotateY(0deg) }
  to { -webkit-transform: rotateX(360deg) rotateY(360deg) }
}

@-moz-keyframes rotatecube {
  from { -moz-transform: rotateX(0deg) rotateY(0deg) }
  to { -moz-transform: rotateX(360deg) rotateY(360deg) }
}

#cube .front  {
  -webkit-transform: rotateY(0deg ) translateZ( 100px );
  -moz-transform: rotateY( 0deg ) translateZ( 100px );
}
#cube .back {
  -webkit-transform: rotateX( 180deg ) translateZ( 100px );
  -moz-transform: rotateX( 180deg ) translateZ( 100px );
}
#cube .right  {
  -webkit-transform: rotateY(  90deg ) translateZ( 100px );
  -moz-transform: rotateY(  90deg ) translateZ( 100px );
}
#cube .left   {
  -webkit-transform: rotateY( -90deg ) translateZ( 100px );
  -moz-transform: rotateY( -90deg ) translateZ( 100px );
}
#cube .top    {
  -webkit-transform: rotateX(  90deg ) translateZ( 100px );
  -moz-transform: rotateX(  90deg ) translateZ( 100px );
}
#cube .bottom {
  -webkit-transform: rotateX( -90deg ) translateZ( 100px );
  -moz-transform: rotateX( -90deg ) translateZ( 100px );
}

I have no idea how this works because I don't have a great understanding of the CSS. It's just a fork of this.