$totalCubes: 30;

@mixin prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}

@mixin prefixFrames($name) {
  @-webkit-keyframes #{$name} { @content; } 
  @-ms-keyframes #{$name} { @content; } 
  @-moz-keyframes #{$name} { @content; } 
  @-o-keyframes #{$name} { @content; } 
  @keyframes #{$name} { @content; } 
}

@function posOrNeg(){
  $n:();
  $r: random(1, 100);
  @if($r>50){
    $n: 1;
  } @else {
    $n: -1;
  }
  @return $n;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: black;
  overflow: hidden;
}

.wrap {
  min-height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


.outer {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  @include prefix(perspective, 2000px);
  position: relative;
}
.cube {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 50vh;
  left: 50%;
}
.side {
  position: absolute;
  height: inherit;
  width: inherit;
}


@mixin cube($i) {
  .outer:nth-child(#{$i}) .cube {
    $hue: ($i - 1) * 360/$totalCubes;
    $size: random(40) + 10;
    $z: $size/2+px;
    height: $size+px;
    width: $size+px;
    margin-top: -$z;
    margin-left: -$z;
    opacity: 0;
    @include prefix(transform, translate3d((random(500) + 200) * posOrNeg()+px, (random(500) + 200) * posOrNeg()+px, 0) rotateX(360deg) rotateY(360deg));
    @include prefix(animation, forward#{$i} 6s infinite);
    @include prefix(animation-delay, $i * .2s);

    .side:nth-child(1){
      @include prefix(transform, rotateX(90deg) translateZ($z));
    }
    .side:nth-child(2){
       @include prefix(transform, translateZ($z));
    }
    .side:nth-child(3){
       @include prefix(transform, rotateY(180deg) translateZ($z));
    }
    .side:nth-child(4){
       @include prefix(transform, rotateY(90deg) translateZ($z));
    }
    .side:nth-child(5){
       @include prefix(transform, rotateY(-90deg) translateZ($z));
    }
    .side:nth-child(6){
       @include prefix(transform, rotateX(-90deg) translateZ($z));
    }

    @for $i from 1 through 6 {
      .side:nth-child(#{$i}){
        background: hsla($hue + ($i * 3), 100%, 50%, .6);
        border: 2px solid lighten(hsla($hue + ($i * 3), 100%, 50%, .6), 20%);
      }
    }  
  }
  @include prefixFrames(forward#{$i}){
    0% {
      @include prefix(transform, translate3d(0, 0, 0) rotateX(0) rotateY(0));
      opacity: 0;
    }
    
    30% {
      opacity: 1;
    }
    
    80% {
      opacity: 1;
    }
   
  }
}

@for $i from 1 through $totalCubes {
  @include cube($i);
}