3D Tunnel Animation
Immersive 3D tunnel with infinite scrolling perspective effect
Code
.tunnel-container {
width: 400px;
height: 400px;
perspective: 100px;
overflow: hidden;
background: #000;
border-radius: 50%;
}
.tunnel {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: tunnel-move 8s linear infinite;
}
.tunnel-ring {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid;
border-radius: 50%;
transform-style: preserve-3d;
}
.tunnel-ring-1 { border-color: rgba(255, 0, 255, 0.8); transform: translateZ(-50px); }
.tunnel-ring-2 { border-color: rgba(0, 255, 255, 0.7); transform: translateZ(-100px); }
.tunnel-ring-3 { border-color: rgba(255, 255, 0, 0.6); transform: translateZ(-150px); }
.tunnel-ring-4 { border-color: rgba(0, 255, 0, 0.5); transform: translateZ(-200px); }
.tunnel-ring-5 { border-color: rgba(0, 0, 255, 0.4); transform: translateZ(-250px); }
.tunnel-center {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px #fff;
}
@keyframes tunnel-move {
0% { transform: rotateY(0deg) rotateX(0deg) translateZ(0); }
100% { transform: rotateY(360deg) rotateX(10deg) translateZ(50px); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-ring tunnel-ring-1"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-ring tunnel-ring-2"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-ring tunnel-ring-3"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-ring tunnel-ring-4"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-ring tunnel-ring-5"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="tunnel-center"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>