$side: 100px
$boxNum: 10
$z: $side / $boxNum
$dur: 4s
$topColor: #fff
$leftColor: #bbb
$rightColor: #ddd

@mixin box($x, $y, $z)
  width: $x
  height: $y
  transform-style: preserve-3d

  .face
    position: absolute
    box-sizing: border-box
    overflow: hidden

    &.bottom
      transform: translateZ(-$z/2)
      width: 100%
      height: 100%

    &.top
      transform: translateZ($z/2)
      width: 100%
      height: 100%

    &.right
      transform: translateZ(-$z/2) rotateY(-90deg)
      transform-origin: left
      left: 100%
      width: $z
      height: 100%

    &.left
      transform: translateZ(-$z/2) rotateY(90deg)
      transform-origin: right
      right: 100%
      width: $z
      height: 100%

    &.front
      transform: translateZ(-$z/2) rotateX(90deg)
      transform-origin: top
      top: 100%
      width: 100%
      height: $z

    &.back
      transform: translateZ(-$z/2) rotateX(-90deg)
      transform-origin: bottom
      bottom: 100%
      width: 100%
      height: $z

@mixin plane($w, $h)
  width: $w
  height: $h
  transform-style: preserve-3d
  
@mixin view($p)
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  perspective: $p

@mixin center
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto      

html, body
  background: #222
  overflow: hidden
  width: 100%
  height: 100%
  
.view
  @include view(0)
    
.plane
  @include plane($side, $side)
  
  &.main
    @include center
    transform: rotateX(60deg) rotateZ(-30deg) translateZ(-$side / 2)
    
    .plane
      position: absolute
      animation: rotate $dur infinite
      
      @for $i from 1 through $boxNum
        &:nth-child(#{$i})
          $del: -$dur * $i / $boxNum / 10
          animation-delay: $del
          .box
            transform: translateZ($z * ($i - 1))
        
            .front, .back, .right, .left
              animation-delay: $del

.box
  @include box($side, $side, $z)
  position: absolute
  
  .top, .bottom
    background: $topColor
  .front, .back
    background: $leftColor
    animation: leftBckg $dur infinite
  .right, .left
    background: $rightColor
    animation: rightBckg $dur infinite

@keyframes rightBckg
  0%, 50%, 100%
    background: $leftColor
  25%, 75%
    background: $rightColor

@keyframes leftBckg
  0%, 50%, 100%
    background: $rightColor
  25%, 75%
    background: $leftColor
  
@keyframes rotate
  0%
    transform: rotateZ(0)
  25%
    transform: rotateZ(90deg)
  50%
    transform: rotateZ(180deg)
  75%
    transform: rotateZ(270deg)
  100%
    transform: rotateZ(360deg)