<div id="slider">
  <div id="stage">
    <div id="shape" class="ring backfaces">
      <div class="plane item-1"> 1 </div>
      <div class="plane item-2"> 2 </div>
      <div class="plane item-3"> 3 </div>
      <div class="plane item-4"> 4 </div>
      <div class="plane item-5"> 5 </div>
      <div class="plane item-6"> 6 </div>
      <div class="plane item-7"> 7 </div>
      <div class="plane item-8"> 8 </div>
      <div class="plane item-9"> 9 </div>
    </div>
  </div>
</div>

#slider {
  background-color: black;
  background-image: -webkit-gradient(radial, 50% 300, 1, 50% 300, 400, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0)));
  width: 100%;
  padding: 50px 0;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -webkit-perspective-origin: 50% 100px;
  -moz-perspective-origin: 50% 100px;
}

#stage {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(-200px);
}

#shape {
  position: relative;
  margin: 0 auto;
  height: 210px;
  width: 210px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: spin 9s infinite linear;
  -moz-animation: spin 9s infinite linear;
  -ms-animation: spin 9s infinite linear;
  animation: spin 9s infinite linear;
}

.plane {
  position: absolute;
  height: 210px;
  width: 210px;
  border: 1px solid white;
  border-radius: 12px;
  text-align: center;
  font-size: 114pt;
  color: black;
  background-color: rgba(255, 255, 255, 0.6);
}

@-webkit-keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(-360deg); }
}

.ring>.item-1 { transform: rotateY(0deg) translateZ(288px); }
.ring>.item-2 { transform: rotateY(40deg) translateZ(288px); }
.ring>.item-3 { transform: rotateY(80deg) translateZ(288px); }
.ring>.item-4 { transform: rotateY(120deg) translateZ(288px); }
.ring>.item-5 { transform: rotateY(160deg) translateZ(288px); }
.ring>.item-6 { transform: rotateY(200deg) translateZ(288px); }
.ring>.item-7 { transform: rotateY(240deg) translateZ(288px); }
.ring>.item-8 { transform: rotateY(280deg) translateZ(288px); }
.ring>.item-9 { transform: rotateY(320deg) translateZ(288px); }