body{
  background: #000;
}
body:after{
  content:'';
}
.rap{
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: 30s spin linear infinite;
  position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  margin: auto;
}
  @for $i from 0 through 6{
    .cube:nth-child(#{$i}){
      width: 150px;
      height: 150px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,.0) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
      background-size: 150px 150px;
      background-position: left;
      box-shadow: 0 0 2px #333 inset;
      position: absolute;
      animation: cubebg 7s linear infinite;
      animation-delay: $i*-.1s;
      transform: rotateX(-40deg) rotateY($i*90deg) translateZ(75px);
      
    &:nth-child(5){
      top: -95px;
      transform: rotateX(50deg) translateY(60px);
    }
    &:nth-child(6){
      top: 95px;
      transform: rotateX(50deg) translateY(-60px);
    }
  }
}
@keyframes spin{
  0%{transform: rotate(1turn) rotateY(1turn);
  }
}
@keyframes cubebg{
  50%{background-size: 50px 50px;
    background-position: top right;
  }
}