%div.wrap
  -60.times do
    %div.c

$total: 60;
$time: 10s;
$size: 300px;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

.wrap {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  height: $size;
  width: $size;
  top: 50%;
  left: 50%;
  margin-top: -$size/2;
  margin-left: -$size/2;
}

.c {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 2px solid;
  border-radius: 50%;
}

@for $i from 1 through $total {
  $rotateY: 360deg/$total * $i;
  .c:nth-child(#{$i}){
    border-color: hsla(360/$total * $i, 100%, 50%, .7);
    animation: spin#{$i} $time infinite linear alternate;
    animation-delay: $i * -.2s;
  }
  @keyframes spin#{$i} {
    100% {
      transform: rotateY($rotateY) rotateX(540deg);
    }
  }
}