transform-origin-z . transform-style:preserve-3d translateZ.

请大神详解这个动画, 主要是这三者属性如何联系起来才打到这个效果?

html

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="line"></div>

css (sass)

html,body{
  height:100%;
  transform-style:preserve-3d;
}
.line{
  width: 100%;
  height: 40px;
  background:#333;
  margin-bottom: -40px;
  position: absolute;
  top: 50%;
}
.circle{
  width: 40px;
  height:40px;
  border-radius: 50%;
  background:red;
  position: absolute;
  z-index:2;
  top: 50%;
  transform-origin: center center -70px;
}

@for $i from 1 through 40{
  .circle:nth-child(#{$i}){
    animation:rotate#{$i} 2s linear -0.2s * $i infinite;
    transform:translateX(50px * $i - 50px) translateZ(70px) rotatex(0deg);
  }
  @keyframes rotate#{$i}{
    100%{
        transform:translateX(50px * $i - 50px) translateZ(70px) rotateX(360deg);
    }
  }
}