$side:50px; 
$colors:#0082c8 #167c80 #a2c5bf #e54b4b #72616e #e8846b;
$time:7s;
$op:true; // control opacities nth()

%center { 
  position: absolute;
  margin:auto;
  top: 0;right: 0;bottom: 0;left: 0;
}

*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { 
  font-family: 'Roboto', sans-serif;
  overflow: hidden;
  background-color: #333;
}

.wrapper {
  @extend %center;
  width: $side*7+7*20;
  height: $side*7+5*20;
}

.container {
  width: 600px;
  font-size: 0px;
}

// cube

.cube {
  width:$side;
  height:$side;
  transform-style: preserve-3d;
  perspective: 9000px;
  display: inline-block;
  /* 
    // In case need to add txt inside cube faces
    text-align: center;
    line-height: $side;
    font-weight: 300;
    color:rgba(255,255,255,0.5);
    font-size: $side/1.2;
    padding: 0;
  */
  margin-left: $side/2.5; 
  margin-top: $side/5;
  
  transform: rotateX(-25deg) rotateY(45deg) rotateZ(0deg);
  animation: rot $time infinite ease-in-out; 
  
  .container:nth-child(even) & {
    &:first-child{ margin-left: -15px; }
    &:nth-of-type(4), 
    &:nth-of-type(5){ 
      animation-delay:0s; 
      @if($op) { opacity: .2; }
    }
    &:nth-of-type(3), 
    &:nth-of-type(6){ 
      animation-delay:$time/70; 
      @if($op) { opacity: .4; }
    }
    &:nth-of-type(2), 
    &:nth-of-type(7){ 
      animation-delay:$time/70*2; 
      @if($op) { opacity: .6; }
    }
    &:nth-of-type(1),
    &:nth-of-type(8){ 
      animation-delay:$time/70*3; 
      @if($op) { opacity: .8; }
    }
  } 
 
  .container:nth-child(odd) & {
    &:nth-of-type(4){ 
      animation-delay:0s; 
      @if($op) { opacity: .2; }  
    }
    &:nth-of-type(3), 
    &:nth-of-type(5){ 
      animation-delay:$time/70; 
      @if($op) { opacity: .4; }
    }
    &:nth-of-type(2), 
    &:nth-of-type(6){ 
      animation-delay:$time/70*2; 
      @if($op) { opacity: .6; }
    }
    &:nth-of-type(1),
    &:nth-of-type(7){ 
      animation-delay:$time/70*3; 
      @if($op) { opacity: .8; }  
    }
  }
 
}

.side{
  width: inherit;
  height: inherit;
  position: absolute;
  backface-visibility: hidden;
  $c:nth($colors, random(6));
  @for $i from 1 to 7 {
    &:nth-child(#{$i}){
      background-color: shade($c, $i * 5% );
    } 
  }
}

.front{ 
  transform: translate3d(0, 0, $side/2) }
.back { 
  transform: rotateY(180deg) translate3d(0, 0, $side/2); }
.left {
  transform: rotateY(-90deg) translate3d(0, 0, $side/2) }
.right { 
  transform: rotateY(90deg) translate3d(0, 0, $side/2) }
.top { 
  transform: rotateX(90deg) translate3d(0, 0, $side/2) }
.bottom { 
  transform: rotateX(-90deg) translate3d(0, 0, $side/2) } 


// animation

@keyframes rot {
  10%, 15% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(90deg);
  } 
  25%,30% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(90deg) rotateY(90deg);
  }
  40%,45% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg);
  }
  55%, 60% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg);
  }
  70%, 75% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(90deg) rotateY(90deg) rotateX(-90deg) rotateY(90deg) rotateX(-90deg);
  }
  85% {
    transform: rotateX(-25deg) rotateY(45deg) rotateZ(0deg);
  }
}