.megabox
  - (1..4*4*4).each do
    .box
      - (1..4).each do
        .face

$total-duration: 4.1s;
$half-pause: 5%;

html, body { height: 100%; }
body { font-size: 30px; overflow: hidden; }

@keyframes megabox
{
  from, #{$half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(0) rotateZ(0) rotateY(0); }
  #{33% - $half-pause}, #{33% + $half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(0) rotateY(0); }
  #{66% - $half-pause}, #{66% + $half-pause} { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(90deg) rotateY(0); }
  #{100% - $half-pause}, to { transform: rotateX(-35deg) rotateY(-45deg) rotateY(90deg) rotateZ(90deg) rotateY(-90deg); }
}
.megabox
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8em;
  height: 8em;
  margin: -4em 0 0 -4em;
  transform-style: preserve-3d;
  animation: megabox $total-duration cubic-bezier(.62,.06,.44,.88) infinite;
}

.box
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  transform-style: preserve-3d;
  margin: -.5em 0 0 -.5em;
  @for $x from 0 to 4
  {
    @for $y from 0 to 4
    {
      @for $z from 0 to 4
      {
        $id: $x + 4*$y + 16*$z + 1;
        $base: translate3d(2 * $x - 3em, 2 * $y - 3em, 2 * $z - 3em);
        @keyframes box#{$id}
        {
          from, 66%, to { transform: $base rotateY(0); }
          33% { transform: $base rotateY(90deg); }
        }
        &:nth-child(#{$id})
        {
          animation: box#{$id} $total-duration steps(1) infinite;
        }
      }
    }
  }
}

.face
{
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background: #222;
  padding: 1px;
  margin: -1px 0 0 -1px;
  &:nth-child(1) { transform: rotateY(90deg) translateZ(-.5em); }
  &:nth-child(2) { transform: rotateX(90deg) translateZ(-.5em); }
  &:nth-child(3) { transform: rotateY(-90deg) translateZ(-.5em); }
  &:nth-child(4) { transform: rotateX(-90deg) translateZ(-.5em); }
}