style.css

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  --size: min(40vw, 40vh);
  --width: calc(var(--size) / 40);
  --dist: calc(var(--width) * 9.8);
  --count: 64;
  --bg: url("https://i.pinimg.com/originals/41/5d/2b/415d2b061f8898b203c764fddd36bb81.gif");
  margin: 0;
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(-45deg, #2f3637, #121111);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--width);
}

.tube {
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: speen 6s infinite linear;
  width: calc(var(--dist) * 2);
  height: var(--size);
}
.tube:nth-child(1) {
  animation-delay: -7.5s;
}
.tube:nth-child(2) {
  animation-delay: -5s;
}
.tube:nth-child(3) {
  animation-delay: -2.5s;
}

.strip {
  transform-style: preserve-3d;
  background-color: white;
  height: var(--size);
  width: var(--width);
  position: absolute;
  background-image: var(--bg);
  background-size: calc(var(--width) * var(--count)) auto;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
.strip:nth-child(1) {
  transform: rotateY(calc(1turn * 1 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -0) center;
}
.strip:nth-child(2) {
  transform: rotateY(calc(1turn * 2 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -1) center;
}
.strip:nth-child(3) {
  transform: rotateY(calc(1turn * 3 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -2) center;
}
.strip:nth-child(4) {
  transform: rotateY(calc(1turn * 4 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -3) center;
}
.strip:nth-child(5) {
  transform: rotateY(calc(1turn * 5 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -4) center;
}
.strip:nth-child(6) {
  transform: rotateY(calc(1turn * 6 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -5) center;
}
.strip:nth-child(7) {
  transform: rotateY(calc(1turn * 7 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -6) center;
}
.strip:nth-child(8) {
  transform: rotateY(calc(1turn * 8 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -7) center;
}
.strip:nth-child(9) {
  transform: rotateY(calc(1turn * 9 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -8) center;
}
.strip:nth-child(10) {
  transform: rotateY(calc(1turn * 10 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -9) center;
}
.strip:nth-child(11) {
  transform: rotateY(calc(1turn * 11 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -10) center;
}
.strip:nth-child(12) {
  transform: rotateY(calc(1turn * 12 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -11) center;
}
.strip:nth-child(13) {
  transform: rotateY(calc(1turn * 13 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -12) center;
}
.strip:nth-child(14) {
  transform: rotateY(calc(1turn * 14 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -13) center;
}
.strip:nth-child(15) {
  transform: rotateY(calc(1turn * 15 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -14) center;
}
.strip:nth-child(16) {
  transform: rotateY(calc(1turn * 16 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -15) center;
}
.strip:nth-child(17) {
  transform: rotateY(calc(1turn * 17 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -16) center;
}
.strip:nth-child(18) {
  transform: rotateY(calc(1turn * 18 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -17) center;
}
.strip:nth-child(19) {
  transform: rotateY(calc(1turn * 19 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -18) center;
}
.strip:nth-child(20) {
  transform: rotateY(calc(1turn * 20 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -19) center;
}
.strip:nth-child(21) {
  transform: rotateY(calc(1turn * 21 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -20) center;
}
.strip:nth-child(22) {
  transform: rotateY(calc(1turn * 22 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -21) center;
}
.strip:nth-child(23) {
  transform: rotateY(calc(1turn * 23 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -22) center;
}
.strip:nth-child(24) {
  transform: rotateY(calc(1turn * 24 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -23) center;
}
.strip:nth-child(25) {
  transform: rotateY(calc(1turn * 25 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -24) center;
}
.strip:nth-child(26) {
  transform: rotateY(calc(1turn * 26 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -25) center;
}
.strip:nth-child(27) {
  transform: rotateY(calc(1turn * 27 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -26) center;
}
.strip:nth-child(28) {
  transform: rotateY(calc(1turn * 28 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -27) center;
}
.strip:nth-child(29) {
  transform: rotateY(calc(1turn * 29 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -28) center;
}
.strip:nth-child(30) {
  transform: rotateY(calc(1turn * 30 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -29) center;
}
.strip:nth-child(31) {
  transform: rotateY(calc(1turn * 31 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -30) center;
}
.strip:nth-child(32) {
  transform: rotateY(calc(1turn * 32 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -31) center;
}
.strip:nth-child(33) {
  transform: rotateY(calc(1turn * 33 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -32) center;
}
.strip:nth-child(34) {
  transform: rotateY(calc(1turn * 34 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -33) center;
}
.strip:nth-child(35) {
  transform: rotateY(calc(1turn * 35 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -34) center;
}
.strip:nth-child(36) {
  transform: rotateY(calc(1turn * 36 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -35) center;
}
.strip:nth-child(37) {
  transform: rotateY(calc(1turn * 37 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -36) center;
}
.strip:nth-child(38) {
  transform: rotateY(calc(1turn * 38 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -37) center;
}
.strip:nth-child(39) {
  transform: rotateY(calc(1turn * 39 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -38) center;
}
.strip:nth-child(40) {
  transform: rotateY(calc(1turn * 40 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -39) center;
}
.strip:nth-child(41) {
  transform: rotateY(calc(1turn * 41 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -40) center;
}
.strip:nth-child(42) {
  transform: rotateY(calc(1turn * 42 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -41) center;
}
.strip:nth-child(43) {
  transform: rotateY(calc(1turn * 43 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -42) center;
}
.strip:nth-child(44) {
  transform: rotateY(calc(1turn * 44 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -43) center;
}
.strip:nth-child(45) {
  transform: rotateY(calc(1turn * 45 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -44) center;
}
.strip:nth-child(46) {
  transform: rotateY(calc(1turn * 46 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -45) center;
}
.strip:nth-child(47) {
  transform: rotateY(calc(1turn * 47 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -46) center;
}
.strip:nth-child(48) {
  transform: rotateY(calc(1turn * 48 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -47) center;
}
.strip:nth-child(49) {
  transform: rotateY(calc(1turn * 49 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -48) center;
}
.strip:nth-child(50) {
  transform: rotateY(calc(1turn * 50 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -49) center;
}
.strip:nth-child(51) {
  transform: rotateY(calc(1turn * 51 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -50) center;
}
.strip:nth-child(52) {
  transform: rotateY(calc(1turn * 52 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -51) center;
}
.strip:nth-child(53) {
  transform: rotateY(calc(1turn * 53 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -52) center;
}
.strip:nth-child(54) {
  transform: rotateY(calc(1turn * 54 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -53) center;
}
.strip:nth-child(55) {
  transform: rotateY(calc(1turn * 55 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -54) center;
}
.strip:nth-child(56) {
  transform: rotateY(calc(1turn * 56 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -55) center;
}
.strip:nth-child(57) {
  transform: rotateY(calc(1turn * 57 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -56) center;
}
.strip:nth-child(58) {
  transform: rotateY(calc(1turn * 58 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -57) center;
}
.strip:nth-child(59) {
  transform: rotateY(calc(1turn * 59 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -58) center;
}
.strip:nth-child(60) {
  transform: rotateY(calc(1turn * 60 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -59) center;
}
.strip:nth-child(61) {
  transform: rotateY(calc(1turn * 61 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -60) center;
}
.strip:nth-child(62) {
  transform: rotateY(calc(1turn * 62 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -61) center;
}
.strip:nth-child(63) {
  transform: rotateY(calc(1turn * 63 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -62) center;
}
.strip:nth-child(64) {
  transform: rotateY(calc(1turn * 64 / var(--count))) translateZ(var(--dist));
  background-position: calc(var(--width) * -63) center;
}

@keyframes speen {
  0% {
    transform: perspective(400px) rotateY(0deg);
  }
  100% {
    transform: perspective(400px) rotateY(360deg);
  }
}