$blockSize:50px;
$sizeAdjust:2.2;
$numBlocks:49;
$time:1s;
$timeFunction:ease-in-out;
$col:floor(sqrt($numBlocks));
$numRules:(($numBlocks / $col) * 2) - 1;
$delay:2;
body {
  margin:0;
  padding:0;
  transform-style:preserve-3d;
  perspective:600;
}
.container {
  width:$blockSize * $col;
  margin:30vh auto;
  transform:rotateX(-20deg) rotateY(-30deg);
  transform-style:preserve-3d;
}
.block {
  width:$blockSize;
  height:$blockSize;
  position:relative;
  float:left;
  transform-style:preserve-3d;
}
.face {
  width:$blockSize;
  height:$blockSize;
  position:absolute;
  box-sizing:border-box;
}
.left {
  transform-origin:0% 50%;
  animation: left $time $timeFunction alternate infinite;
  background:#373C94;
}
.right {
  transform-origin:100% 50%;
  animation: right $time $timeFunction alternate infinite;
  background:#373C94;
}
.front {
  animation: front $time $timeFunction alternate infinite;
  background:#5287A5;
}
.back {
  transform:translateZ(-$blockSize);
  background:#5287A5;
}
.top {
  transform-origin:50% 0%;
  animation: top $time $timeFunction alternate infinite;
  background:#81C8A8;
}
.bottom {
  transform-origin:50% 100%;
  animation: bottom $time $timeFunction alternate infinite;
  background:#81C8A8;
}

//animations
@keyframes left {
  0% {width:$blockSize;transform:rotateY(90deg) translateX(0);}
  100% {width:$blockSize*$sizeAdjust;transform:rotateY(90deg) translateX(-(($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes right {
  0% {width:$blockSize;transform:rotateY(-90deg) translateZ(0) translateX(0);}
  100% {width:$blockSize*$sizeAdjust;transform:rotateY(-90deg) translateZ((($blockSize * $sizeAdjust) - $blockSize)) translateX((($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes bottom {
  0% {height:$blockSize;transform:rotateX(90deg) translateY(0);top:0;}
  100% {height:$blockSize*$sizeAdjust;transform:rotateX(90deg) translateY((($blockSize * $sizeAdjust) - $blockSize));top:-(($blockSize * $sizeAdjust) - $blockSize);}
}
@keyframes top {
  0% {height:$blockSize;transform:rotateX(-90deg) translateY(0);}
  100% {height:$blockSize*$sizeAdjust;transform:rotateX(-90deg) translateY(-(($blockSize * $sizeAdjust) - $blockSize));}
}
@keyframes front {
  0% {transform:translateZ(0);}
  100% {transform:translateZ((($blockSize * $sizeAdjust) - $blockSize));}
}



//delay timing
@for $i from 1 to ($col - 1) {
  .block:nth-of-type(#{($col - 1)+n+($i - ($col - 1))}) > .face{
    animation-delay:($time / $numRules) * $i * $delay
  }
}
.block:nth-of-type(#{($col - 1)+n}) > .face {
  animation-delay:($time / $numRules) * ($col - 1) * $delay;
}
@for $n from $col to ($numRules + 1) {
  .block:nth-of-type(#{($col - 1)+n+"+"+((($col * $n)-($col - 1))-(($col - 1) * $col))}) > .face {
    animation-delay:($time / $numRules) * $n * $delay
  }
}
.block:nth-of-type(1) {
  display:none;
}