3D-Tunneleffekt implementiert durch CSS3

<div Klasse="Szene">
  <div Klasse="Wrapper">
    <ul Klasse="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>

@keyframes rundherum {
  Zu {
    transformieren: drehenX(360 Grad);
  }
}
Körper {
  Hintergrundfarbe: #000000;
}

.Szene {
  Breite: 600px;
  Höhe: 600px;
  Rand: 0 automatisch;
  Perspektive: 500px;
}

.wrapper {
  Breite: 100 %;
  Höhe: 100%;
  Transformationsstil: 3D bewahren;
  transformieren: drehenY(0 Grad) verschiebenZ(300px);
}

.tunnel {
  Position: relativ;
  Breite: 200px;
  Höhe: 200px;
  Rand: 0 automatisch;
  Transformationsstil: 3D bewahren;
  Animation: rundherum, 10 s, unendlich, linear;
}

.tunnel .ring {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Rand: 6px;
  Rahmenstil: gestrichelt;
  Randradius: 50 %;
  Transform-Ursprung: 50 % 50 %;
  Farbe: #8df435;
  transformieren: übersetzenY(-200px);
}

/* SASS-Optimierung dank @imjared */
.ring:n-tes-Kind(1) {
  Farbe: #ff1500;
  transformieren: rotierenX(5 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(2) {
  Farbe: #ff2b00;
  transformieren: rotierenX(10 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(3) {
  Farbe: #ff4000;
  transformieren: rotierenX(15 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(4) {
  Farbe: #ff5500;
  transformieren: rotierenX(20 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(5) {
  Farbe: #ff6a00;
  transformieren: rotierenX(25 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(6) {
  Farbe: #ff8000;
  transformieren: rotierenX(30 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(7) {
  Farbe: #ff9500;
  transformieren: rotierenX(35 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(8) {
  Farbe: #ffaa00;
  transformieren: rotierenX(40 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(9) {
  Farbe: #ffbf00;
  transformieren: rotierenX(45 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(10) {
  Farbe: #ffd500;
  transformieren: rotierenX(50 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(11) {
  Farbe: #ffea00;
  transformieren: rotierenX(55 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(12) {
  Farbe: gelb;
  transformieren: rotierenX(60 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(13) {
  Farbe: #eaff00;
  transformieren: rotierenX(65 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(14) {
  Farbe: #d5ff00;
  transformieren: rotierenX(70 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(15) {
  Farbe: #bfff00;
  transformieren: rotierenX(75 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(16) {
  Farbe: #aaff00;
  transformieren: rotierenX(80 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(17) {
  Farbe: #95ff00;
  transformieren: rotierenX(85 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(18) {
  Farbe: #80ff00;
  transformieren: rotierenX(90 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(19) {
  Farbe: #6aff00;
  transformieren: rotierenX(95 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(20) {
  Farbe: #55ff00;
  transformieren: rotierenX(100 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(21) {
  Farbe: #40ff00;
  transformieren: rotierenX(105 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(22) {
  Farbe: #2bff00;
  transformieren: rotierenX(110 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(23) {
  Farbe: #15ff00;
  transformieren: rotierenX(115 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(24) {
  Farbe: Limette;
  transformieren: rotierenX(120 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(25) {
  Farbe: #00ff15;
  transformieren: rotierenX(125 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(26) {
  Farbe: #00ff2b;
  transformieren: rotierenX(130 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(27) {
  Farbe: #00ff40;
  transformieren: rotierenX(135 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(28) {
  Farbe: #00ff55;
  transformieren: rotierenX(140 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(29) {
  Farbe: #00ff6a;
  transformieren: rotierenX(145 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(30) {
  Farbe: #00ff80;
  transformieren: rotierenX(150 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(31) {
  Farbe: #00ff95;
  transformieren: rotierenX(155 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(32) {
  Farbe: #00ffaa;
  transformieren: rotierenX(160 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(33) {
  Farbe: #00ffbf;
  transformieren: rotierenX(165 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(34) {
  Farbe: #00ffd5;
  transformieren: rotierenX(170 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(35) {
  Farbe: #00ffea;
  transformieren: rotierenX(175 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(36) {
  Farbe: Cyan;
  transformieren: rotierenX(180 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(37) {
  Farbe: #00eaff;
  transformieren: rotierenX(185 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(38) {
  Farbe: #00d5ff;
  transformieren: rotierenX(190 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(39) {
  Farbe: tiefes Himmelblau;
  transformieren: rotierenX(195 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(40) {
  Farbe: #00aaff;
  transformieren: rotierenX(200 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(41) {
  Farbe: #0095ff;
  transformieren: rotierenX(205 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(42) {
  Farbe: #0080ff;
  transformieren: rotierenX(210 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(43) {
  Farbe: #006aff;
  transformieren: rotierenX(215 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(44) {
  Farbe: #0055ff;
  transformieren: rotierenX(220 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(45) {
  Farbe: #0040ff;
  transformieren: rotierenX(225 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(46) {
  Farbe: #002bff;
  transformieren: rotierenX(230 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(47) {
  Farbe: #0015ff;
  transformieren: rotierenX(235 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(48) {
  Farbe: blau;
  transformieren: rotierenX(240 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(49) {
  Farbe: #1500ff;
  transformieren: rotierenX(245 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(50) {
  Farbe: #2b00ff;
  transformieren: rotierenX(250 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(51) {
  Farbe: #4000ff;
  transformieren: rotierenX(255 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(52) {
  Farbe: #5500ff;
  transformieren: rotierenX(260 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(53) {
  Farbe: #6a00ff;
  transformieren: rotierenX(265 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(54) {
  Farbe: #8000ff;
  transformieren: rotierenX(270 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(55) {
  Farbe: #9500ff;
  transformieren: rotierenX(275 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(56) {
  Farbe: #aa00ff;
  transformieren: rotierenX(280 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(57) {
  Farbe: #bf00ff;
  transformieren: rotierenX(285 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(58) {
  Farbe: #d500ff;
  transformieren: rotierenX(290 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(59) {
  Farbe: #ea00ff;
  transformieren: rotierenX(295 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(60) {
  Farbe: Magenta;
  transformieren: rotierenX(300 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(61) {
  Farbe: #ff00ea;
  transformieren: rotierenX(305 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(62) {
  Farbe: #ff00d5;
  transformieren: rotierenX(310 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(63) {
  Farbe: #ff00bf;
  transformieren: rotierenX(315 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(64) {
  Farbe: #ff00aa;
  transformieren: rotierenX(320 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(65) {
  Farbe: #ff0095;
  transformieren: rotierenX(325 ​​Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(66) {
  Farbe: #ff0080;
  transformieren: rotierenX(330 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(67) {
  Farbe: #ff006a;
  transformieren: rotierenX(335 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(68) {
  Farbe: #ff0055;
  transformieren: rotierenX(340 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(69) {
  Farbe: #ff0040;
  transformieren: rotierenX(345 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(70) {
  Farbe: #ff002b;
  transformieren: rotierenX(350 Grad) verschiebenY(-200px);
}

.ring:n-tes-Kind(71) {
  Farbe: #ff0015;
  transformieren: rotierenX(355 Grad) verschiebenY(-200 Pixel);
}

.ring:n-tes-Kind(72) {
  Farbe: rot;
  transformieren: rotierenX(360 Grad) verschiebenY(-200px);
}