3D tunnel effect implemented by CSS3

3D tunnel effect implemented by CSS3

The effect achieved

Implementation Code

html

<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>

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 */
.ring:nth-child(1) {
  color: #ff1500;
  transform: rotateX(5deg) translateY(-200px);
}

.ring:nth-child(2) {
  color: #ff2b00;
  transform: rotateX(10deg) translateY(-200px);
}

.ring:nth-child(3) {
  color: #ff4000;
  transform: rotateX(15deg) translateY(-200px);
}

.ring:nth-child(4) {
  color: #ff5500;
  transform: rotateX(20deg) translateY(-200px);
}

.ring:nth-child(5) {
  color: #ff6a00;
  transform: rotateX(25deg) translateY(-200px);
}

.ring:nth-child(6) {
  color: #ff8000;
  transform: rotateX(30deg) translateY(-200px);
}

.ring:nth-child(7) {
  color: #ff9500;
  transform: rotateX(35deg) translateY(-200px);
}

.ring:nth-child(8) {
  color: #ffaa00;
  transform: rotateX(40deg) translateY(-200px);
}

.ring:nth-child(9) {
  color: #ffbf00;
  transform: rotateX(45deg) translateY(-200px);
}

.ring:nth-child(10) {
  color: #ffd500;
  transform: rotateX(50deg) translateY(-200px);
}

.ring:nth-child(11) {
  color: #ffea00;
  transform: rotateX(55deg) translateY(-200px);
}

.ring:nth-child(12) {
  color: yellow;
  transform: rotateX(60deg) translateY(-200px);
}

.ring:nth-child(13) {
  color: #eaff00;
  transform: rotateX(65deg) translateY(-200px);
}

.ring:nth-child(14) {
  color: #d5ff00;
  transform: rotateX(70deg) translateY(-200px);
}

.ring:nth-child(15) {
  color: #bfff00;
  transform: rotateX(75deg) translateY(-200px);
}

.ring:nth-child(16) {
  color: #aaff00;
  transform: rotateX(80deg) translateY(-200px);
}

.ring:nth-child(17) {
  color: #95ff00;
  transform: rotateX(85deg) translateY(-200px);
}

.ring:nth-child(18) {
  color: #80ff00;
  transform: rotateX(90deg) translateY(-200px);
}

.ring:nth-child(19) {
  color: #6aff00;
  transform: rotateX(95deg) translateY(-200px);
}

.ring:nth-child(20) {
  color: #55ff00;
  transform: rotateX(100deg) translateY(-200px);
}

.ring:nth-child(21) {
  color: #40ff00;
  transform: rotateX(105deg) translateY(-200px);
}

.ring:nth-child(22) {
  color: #2bff00;
  transform: rotateX(110deg) translateY(-200px);
}

.ring:nth-child(23) {
  color: #15ff00;
  transform: rotateX(115deg) translateY(-200px);
}

.ring:nth-child(24) {
  color: lime;
  transform: rotateX(120deg) translateY(-200px);
}

.ring:nth-child(25) {
  color: #00ff15;
  transform: rotateX(125deg) translateY(-200px);
}

.ring:nth-child(26) {
  color: #00ff2b;
  transform: rotateX(130deg) translateY(-200px);
}

.ring:nth-child(27) {
  color: #00ff40;
  transform: rotateX(135deg) translateY(-200px);
}

.ring:nth-child(28) {
  color: #00ff55;
  transform: rotateX(140deg) translateY(-200px);
}

.ring:nth-child(29) {
  color: #00ff6a;
  transform: rotateX(145deg) translateY(-200px);
}

.ring:nth-child(30) {
  color: #00ff80;
  transform: rotateX(150deg) translateY(-200px);
}

.ring:nth-child(31) {
  color: #00ff95;
  transform: rotateX(155deg) translateY(-200px);
}

.ring:nth-child(32) {
  color: #00ffaa;
  transform: rotateX(160deg) translateY(-200px);
}

.ring:nth-child(33) {
  color: #00ffbf;
  transform: rotateX(165deg) translateY(-200px);
}

.ring:nth-child(34) {
  color: #00ffd5;
  transform: rotateX(170deg) translateY(-200px);
}

.ring:nth-child(35) {
  color: #00ffea;
  transform: rotateX(175deg) translateY(-200px);
}

.ring:nth-child(36) {
  color: cyan;
  transform: rotateX(180deg) translateY(-200px);
}

.ring:nth-child(37) {
  color: #00eaff;
  transform: rotateX(185deg) translateY(-200px);
}

.ring:nth-child(38) {
  color: #00d5ff;
  transform: rotateX(190deg) translateY(-200px);
}

.ring:nth-child(39) {
  color:deepskyblue;
  transform: rotateX(195deg) translateY(-200px);
}

.ring:nth-child(40) {
  color: #00aaff;
  transform: rotateX(200deg) translateY(-200px);
}

.ring:nth-child(41) {
  color: #0095ff;
  transform: rotateX(205deg) translateY(-200px);
}

.ring:nth-child(42) {
  color: #0080ff;
  transform: rotateX(210deg) translateY(-200px);
}

.ring:nth-child(43) {
  color: #006aff;
  transform: rotateX(215deg) translateY(-200px);
}

.ring:nth-child(44) {
  color: #0055ff;
  transform: rotateX(220deg) translateY(-200px);
}

.ring:nth-child(45) {
  color: #0040ff;
  transform: rotateX(225deg) translateY(-200px);
}

.ring:nth-child(46) {
  color: #002bff;
  transform: rotateX(230deg) translateY(-200px);
}

.ring:nth-child(47) {
  color: #0015ff;
  transform: rotateX(235deg) translateY(-200px);
}

.ring:nth-child(48) {
  color: blue;
  transform: rotateX(240deg) translateY(-200px);
}

.ring:nth-child(49) {
  color: #1500ff;
  transform: rotateX(245deg) translateY(-200px);
}

.ring:nth-child(50) {
  color: #2b00ff;
  transform: rotateX(250deg) translateY(-200px);
}

.ring:nth-child(51) {
  color: #4000ff;
  transform: rotateX(255deg) translateY(-200px);
}

.ring:nth-child(52) {
  color: #5500ff;
  transform: rotateX(260deg) translateY(-200px);
}

.ring:nth-child(53) {
  color: #6a00ff;
  transform: rotateX(265deg) translateY(-200px);
}

.ring:nth-child(54) {
  color: #8000ff;
  transform: rotateX(270deg) translateY(-200px);
}

.ring:nth-child(55) {
  color: #9500ff;
  transform: rotateX(275deg) translateY(-200px);
}

.ring:nth-child(56) {
  color: #aa00ff;
  transform: rotateX(280deg) translateY(-200px);
}

.ring:nth-child(57) {
  color: #bf00ff;
  transform: rotateX(285deg) translateY(-200px);
}

.ring:nth-child(58) {
  color: #d500ff;
  transform: rotateX(290deg) translateY(-200px);
}

.ring:nth-child(59) {
  color: #ea00ff;
  transform: rotateX(295deg) translateY(-200px);
}

.ring:nth-child(60) {
  color: magenta;
  transform: rotateX(300deg) translateY(-200px);
}

.ring:nth-child(61) {
  color: #ff00ea;
  transform: rotateX(305deg) translateY(-200px);
}

.ring:nth-child(62) {
  color: #ff00d5;
  transform: rotateX(310deg) translateY(-200px);
}

.ring:nth-child(63) {
  color: #ff00bf;
  transform: rotateX(315deg) translateY(-200px);
}

.ring:nth-child(64) {
  color: #ff00aa;
  transform: rotateX(320deg) translateY(-200px);
}

.ring:nth-child(65) {
  color: #ff0095;
  transform: rotateX(325deg) translateY(-200px);
}

.ring:nth-child(66) {
  color: #ff0080;
  transform: rotateX(330deg) translateY(-200px);
}

.ring:nth-child(67) {
  color: #ff006a;
  transform: rotateX(335deg) translateY(-200px);
}

.ring:nth-child(68) {
  color: #ff0055;
  transform: rotateX(340deg) translateY(-200px);
}

.ring:nth-child(69) {
  color: #ff0040;
  transform: rotateX(345deg) translateY(-200px);
}

.ring:nth-child(70) {
  color: #ff002b;
  transform: rotateX(350deg) translateY(-200px);
}

.ring:nth-child(71) {
  color: #ff0015;
  transform: rotateX(355deg) translateY(-200px);
}

.ring:nth-child(72) {
  color: red;
  transform: rotateX(360deg) translateY(-200px);
}

The above is the details of the 3D tunnel effect implemented by CSS3. For more information about CSS3 3D tunnel effect, please pay attention to other related articles on 123WORDPRESS.COM!

<<: 

>>:  What does the "a" in rgba mean? CSS RGBA Color Guide

Recommend

Detailed explanation of how to enable HSTS in nginx to force the browser to redirect to HTTPS access

In the previous article, we have implemented loca...

Detailed explanation of the concepts, principles and common usage of MySQL stored procedures

This article uses examples to explain the concept...

Pure CSS to achieve the internal anchor point of the web page when the up and down offset code example

Recently, when I was working on my "Football...

Three strategies for rewriting MySQL query statements

Table of contents Complex query and step-by-step ...

CSS achieves colorful and smart shadow effects

background Ever wondered how to create a shadow e...

Linux disk management LVM usage

1. Introduction to LVM When we manage Linux disks...

Solution to "Specialized key was too long" in MySQL

Table of contents Solution 1 Solution 2 When crea...

Sharing an idea of ​​building a master-slave system for a large MySQL database

This week has been as busy as a war. I feel like ...

JS implements click drop effect

js realizes the special effect of clicking and dr...

Tutorial on installing MySQL 5.6 using RPM in CentOS

All previous projects were deployed in the Window...

Flex layout makes adaptive pages (syntax and examples)

Introduction to Flex Layout Flex in English means...

How to install nginx in centos7

Install the required environment 1. gcc installat...

Detailed analysis of the blocking problem of js and css

Table of contents DOMContentLoaded and load What ...

Implementation of MySQL select in subquery optimization

The following demonstration is based on MySQL ver...

Detailed tutorial on building Gitlab server on CentOS8.1

There is no need to say much about the difference...