calvez
4/11/2013 - 8:53 PM

A CodePen by calvez. Tunnel vision 3D CSS - Tunnel vision effect made with just some CSS 3D transforms, border-radius and border-style. Not

A CodePen by calvez. Tunnel vision 3D CSS - Tunnel vision effect made with just some CSS 3D transforms, border-radius and border-style. Not really useful, it just looks nice...

style.css
content_copyfile_download
@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);
}
.ring:nth-child(1) {
  color:#8df435;
  transform: rotateX(5deg) translateY(-200px);
}
.ring:nth-child(2) {
  color:#8df435;
  transform: rotateX(10deg) translateY(-200px);
}
.ring:nth-child(3) {
  color:#a8e526;
  transform: rotateX(15deg) translateY(-200px);
}
.ring:nth-child(4) {
  color:#a8e526;
  transform: rotateX(20deg) translateY(-200px);
}
.ring:nth-child(5) {
  color:#c2d11c;
  transform: rotateX(25deg) translateY(-200px);
}
.ring:nth-child(6) {
  color:#c2d11c;
  transform: rotateX(30deg) translateY(-200px);
}
.ring:nth-child(7) {
  color:#c8cb1b;
  transform: rotateX(35deg) translateY(-200px);
}
.ring:nth-child(8) {
  color:#c8cb1b;
  transform: rotateX(40deg) translateY(-200px);
}
.ring:nth-child(9) {
  color:#deb21a;
  transform: rotateX(45deg) translateY(-200px);
}
.ring:nth-child(10) {
  color:#deb21a;
  transform: rotateX(50deg) translateY(-200px);
}
.ring:nth-child(11) {
  color:#ef9621;
  transform: rotateX(55deg) translateY(-200px);
}
.ring:nth-child(12) {
  color:#ef9621;
  transform: rotateX(60deg) translateY(-200px);
}
.ring:nth-child(13) {
  color:#f29122;
  transform: rotateX(65deg) translateY(-200px);
}
.ring:nth-child(14) {
  color:#f29122;
  transform: rotateX(70deg) translateY(-200px);
}
.ring:nth-child(15) {
  color:#fb7430;
  transform: rotateX(75deg) translateY(-200px);
}
.ring:nth-child(16) {
  color:#fb7430;
  transform: rotateX(80deg) translateY(-200px);
}
.ring:nth-child(17) {
  color:#fe5944;
  transform: rotateX(85deg) translateY(-200px);
}
.ring:nth-child(18) {
  color:#fe5944;
  transform: rotateX(90deg) translateY(-200px);
}
.ring:nth-child(19) {
  color:#fe5548;
  transform: rotateX(95deg) translateY(-200px);
}
.ring:nth-child(20) {
  color:#fe5548;
  transform: rotateX(100deg) translateY(-200px);
}
.ring:nth-child(21) {
  color:#f83d61;
  transform: rotateX(105deg) translateY(-200px);
}
.ring:nth-child(22) {
  color:#f83d61;
  transform: rotateX(110deg) translateY(-200px);
}
.ring:nth-child(23) {
  color:#ec2b7d;
  transform: rotateX(115deg) translateY(-200px);
}
.ring:nth-child(24) {
  color:#ec2b7d;
  transform: rotateX(120deg) translateY(-200px);
}
.ring:nth-child(25) {
  color:#e82983;
  transform: rotateX(125deg) translateY(-200px);
}
.ring:nth-child(26) {
  color:#e82983;
  transform: rotateX(130deg) translateY(-200px);
}
.ring:nth-child(27) {
  color:#d41e9f;
  transform: rotateX(135deg) translateY(-200px);
}
.ring:nth-child(28) {
  color:#d41e9f;
  transform: rotateX(140deg) translateY(-200px);
}
.ring:nth-child(29) {
  color:#bd1aba;
  transform: rotateX(145deg) translateY(-200px);
}
.ring:nth-child(30) {
  color:#bd1aba;
  transform: rotateX(150deg) translateY(-200px);
}
.ring:nth-child(31) {
  color:#b81ac0;
  transform: rotateX(155deg) translateY(-200px);
}
.ring:nth-child(32) {
  color:#b81ac0;
  transform: rotateX(160deg) translateY(-200px);
}
.ring:nth-child(33) {
  color:#9c1fd7;
  transform: rotateX(165deg) translateY(-200px);
}
.ring:nth-child(34) {
  color:#9c1fd7;
  transform: rotateX(170deg) translateY(-200px);
}
.ring:nth-child(35) {
  color:#802aea;
  transform: rotateX(175deg) translateY(-200px);
}
.ring:nth-child(36) {
  color:#802aea;
  transform: rotateX(180deg) translateY(-200px);
}
.ring:nth-child(37) {
  color:#7a2dee;
  transform: rotateX(185deg) translateY(-200px);
}
.ring:nth-child(38) {
  color:#7a2dee;
  transform: rotateX(190deg) translateY(-200px);
}
.ring:nth-child(39) {
  color:#5f40f9;
  transform: rotateX(195deg) translateY(-200px);
}
.ring:nth-child(40) {
  color:#5f40f9;
  transform: rotateX(200deg) translateY(-200px);
}
.ring:nth-child(41) {
  color:#4657fe;
  transform: rotateX(205deg) translateY(-200px);
}
.ring:nth-child(42) {
  color:#4657fe;
  transform: rotateX(210deg) translateY(-200px);
}
.ring:nth-child(43) {
  color:#425cfe;
  transform: rotateX(215deg) translateY(-200px);
}
.ring:nth-child(44) {
  color:#425cfe;
  transform: rotateX(220deg) translateY(-200px);
}
.ring:nth-child(45) {
  color:#2f77fb;
  transform: rotateX(225deg) translateY(-200px);
}
.ring:nth-child(46) {
  color:#2f77fb;
  transform: rotateX(230deg) translateY(-200px);
}
.ring:nth-child(47) {
  color:#425cfe;
  transform: rotateX(235deg) translateY(-200px);
}
.ring:nth-child(48) {
  color:#425cfe;
  transform: rotateX(240deg) translateY(-200px);
}
.ring:nth-child(49) {
  color:#4657fe;
  transform: rotateX(245deg) translateY(-200px);
}
.ring:nth-child(50) {
  color:#4657fe;
  transform: rotateX(250deg) translateY(-200px);
}
.ring:nth-child(51) {
  color:#5f40f9;
  transform: rotateX(255deg) translateY(-200px);
}
.ring:nth-child(52) {
  color:#5f40f9;
  transform: rotateX(260deg) translateY(-200px);
}
.ring:nth-child(53) {
  color:#802aea;
  transform: rotateX(265deg) translateY(-200px);
}
.ring:nth-child(54) {
  color:#802aea;
  transform: rotateX(270deg) translateY(-200px);
}
.ring:nth-child(55) {
  color:#802aea;
  transform: rotateX(275deg) translateY(-200px);
}
.ring:nth-child(56) {
  color:#9c1fd7;
  transform: rotateX(280deg) translateY(-200px);
}
.ring:nth-child(57) {
  color:#9c1fd7;
  transform: rotateX(285deg) translateY(-200px);
}
.ring:nth-child(58) {
  color:#9c1fd7;
  transform: rotateX(290deg) translateY(-200px);
}
.ring:nth-child(59) {
  color:#d41e9f;
  transform: rotateX(295deg) translateY(-200px);
}
.ring:nth-child(60) {
  color:#d41e9f;
  transform: rotateX(300deg) translateY(-200px);
}
.ring:nth-child(61) {
  color:#ec2b7d;
  transform: rotateX(305deg) translateY(-200px);
}
.ring:nth-child(62) {
  color:#ec2b7d;
  transform: rotateX(310deg) translateY(-200px);
}
.ring:nth-child(63) {
  color:#fe5548;
  transform: rotateX(315deg) translateY(-200px);
}
.ring:nth-child(64) {
  color:#fe5548;
  transform: rotateX(320deg) translateY(-200px);
}
.ring:nth-child(65) {
  color:#fb7430;
  transform: rotateX(325deg) translateY(-200px);
}
.ring:nth-child(66) {
  color:#fb7430;
  transform: rotateX(330deg) translateY(-200px);
}
.ring:nth-child(67) {
  color:#ef9621;
  transform: rotateX(335deg) translateY(-200px);
}
.ring:nth-child(68) {
  color:#ef9621;
  transform: rotateX(340deg) translateY(-200px);
}
.ring:nth-child(69) {
  color:#c8cb1b;
  transform: rotateX(345deg) translateY(-200px);
}
.ring:nth-child(70) {
  color:#a8e526;
  transform: rotateX(350deg) translateY(-200px);
}
.ring:nth-child(71) {
  color:#8df435;
  transform: rotateX(355deg) translateY(-200px);
}
script.js
content_copyfile_download
/* Works best in webkit browsers */
index.html
content_copyfile_download
<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>