<h1>viewport as perspective</h1>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>


<h2>Please scroll slowly!</h2>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>

  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <h3>Oh yeah, that was great!</h3>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
@bg:#468;
* {margin:0;padding:0;}
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  
}
h1,h2,h3,h4,h5,h6 {
  margin:1em 0;
}


body {
  text-align:center;
  background:@bg;
  font-size: 20px;
  overflow: auto;
  text-align:center;
  color:white;
  font-family:sans-serif;
  
  perspective: 500px;
}
.cube {
  display:inline-block;
  margin:50px auto;
  width: 100%;
  height: 100px;
  
  transform-style:preserve-3d;
  position: relative;
}
.cube .side {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  border: 1px solid #eee;
  left:50%;
  margin-left:-50px;
  background:fade(#fff,25%);
  transform-style:preserve-3d;
  //backface-visibility: hidden;
}

@speed:10s;

.cube .front  {animation:@speed spin-front linear infinite; transform:rotateY(0deg ) translateZ(50px)}
.cube .back   {animation:@speed spin-back linear infinite; transform: rotateX( 180deg )translateZ(50px); }
.cube .right  { animation:@speed spin-right linear infinite; transform: rotateY(  90deg )translateZ(50px); }
.cube .left   { animation:@speed spin-left linear infinite; transform: rotateY( -90deg )translateZ(50px); }
.cube .top    { animation:@speed spin-top linear infinite; transform: rotateX(  90deg )translateZ(50px); }
.cube .bottom { animation:@speed spin-bottom linear infinite; transform: rotateX( -90deg )translateZ(50px); }


.cube.stop > div {
  animation-play-state:paused;  
}


@keyframes spin-front {
    from {transform:rotateY(0deg) translateZ(50px);}
  to {transform:rotateY(360deg) translateZ(50px);}
}


@keyframes spin-back {
    from {transform:rotateX(180deg ) rotateY(0deg) translateZ(50px)}
  to {transform:rotateX(180deg) rotateY(-360deg) translateZ(50px)}
}

@keyframes spin-left {
    from {transform:rotateY(-90deg ) translateZ(50px)}
  to {transform:rotateY(270deg)translateZ(50px)}
}
@keyframes spin-top {
    from {transform:rotateY(0deg)rotateX(  90deg)translateZ(50px)}
  to {transform:rotateY(360deg)rotateX(90deg )translateZ(50px)}
}
@keyframes spin-right {
    from {transform:rotateY(  90deg )translateZ(50px)}
  to {transform:rotateY(450deg )translateZ(50px)}
}
@keyframes spin-bottom {
    from {transform:rotateY(0deg)rotateX( -90deg )translateZ(50px)}
  to {transform:rotateY(360deg)rotateX( -90deg )translateZ(50px)}
}
View Compiled
$().ready(function()  {
   $(".cube").click(function() {
      $(this).toggleClass("stop");
   });
});
Rerun