Rotating Squares Tunnel | Learning Axis

HTML

CSS

body {
  height: 100vh;
  margin: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.space-tunnel {
  position: relative;
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  perspective: 800px;
  transform: translateZ(0);
}
.cube-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(128, 255, 255, 0.6);
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.3),
    0 0 60px rgba(0, 128, 255, 0.2);
  animation: fly 3s linear infinite;
  mix-blend-mode: screen;
  filter: drop-shadow(2px 0 red) drop-shadow(-2px 0 blue);
}
.cube-frame:nth-child(1) { animation-delay: 0s; }
.cube-frame:nth-child(2) { animation-delay: 0.4s; }
.cube-frame:nth-child(3) { animation-delay: 0.8s; }
.cube-frame:nth-child(4) { animation-delay: 1.2s; }
.cube-frame:nth-child(5) { animation-delay: 1.6s; }
.cube-frame:nth-child(6) { animation-delay: 2s; }
.cube-frame:nth-child(7) { animation-delay: 2.4s; }
@keyframes fly {
  0% {
    transform: translateZ(600px) scale(0.1) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateZ(-800px) scale(2.5) rotate(360deg);
    opacity: 0;
  }
}
@keyframes flicker {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}