<div class="scene">
  <div class="wrapper">
    <ul class="tunnel">
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
      <li class="ring"></li>
    </ul>
  </div>
</div>

@import "compass/css3";

@keyframes roundandround {
  to {
    transform: rotateX(360deg);
  }
}

body {
  background-color: #000000;
}
.scene {
  width:600px;
  height:600px;
  margin: 0 auto;
  perspective:500px;
}
.wrapper {
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(300px);
}
.tunnel {
  position: relative;
  width: 200px;
  height: 200px;
  margin:0 auto;
  transform-style: preserve-3d;
  animation: roundandround 10s infinite linear;
}
.tunnel .ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:6px;
  border-style: dashed;
  border-radius: 50%;
  transform-origin: 50% 50%;
  color:#8df435;
  transform: translateY(-200px);
}

/* SASS optimisation thanks to @imjared */
@for $i from 1 through 72 {
  .ring:nth-child(#{$i}) {
    color: hsl($i * 5deg, 100, 50);
    transform: rotateX($i * 5deg) translateY(-200px);
  }
}

// "DISCLAIMER" 
//
// 1. This is an experiment to demonstrate the power of CSS and modern browsers. This is not how HTML and CSS should be used.
// 2. Works best in webkit browsers