/* input variables */
$size: 80px;
$bg: #CCC;
$fill: #222;
$speed: 3;
$way: 500;

/* calculated */
$offset: 90 / 8;

body {
  background: $bg;
  overflow: hidden;
}
.container {
  width: $size * 3;
  height: $size * 3;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  
  animation: scalerotate #{$speed}s linear infinite;
}

.rect {
  width: $size;
  height: $size;
  float: left;
  
  &::before {
    background: $fill;    
    display: block;
    width: $size;
    height: $size;
    outline: 1px solid $fill;
    content: "";
  }
}

@keyframes scalerotate {
	0%  {
    transform: translate3D(0, -50%, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate3D(0, -50%, 0) rotate(360deg) scale(3 * ($size + 1) / $size);
  }
}

$order: 1 2 3 6 9 8 7 4;

@for $i from 1 to 9 {
  .rect:nth-child(#{nth($order,$i)}) {
    animation: anim#{$i} #{$speed}s ease-in infinite;
  }
  $vertical: (nth($order,$i) - 1) % 3;
  $horizontal: floor((nth($order,$i) - 1) / 3);
  $x: 0;
  $y: 0;

  @if $vertical == 0 {
    $x: -1 * $way;
  } @elseif $vertical == 2 {
    $x: $way;
  }

  @if $horizontal == 0 {
    $y: -1 * $way;
  } @elseif $horizontal == 2 {
    $y: $way;
  }


  @keyframes anim#{$i} {
    0% {
      transform: translate3D(0,0,0);
    }
    #{($i - 1) * $offset}% {
      transform: translate3D(0,0,0);
    }
    100% {
      transform: translate3D(#{$x}px, #{$y}px, #{$way}px);
    }
  }
}