使用CSS/Javascript (splitting.js)在旋转的圆柱体周围环绕动态文本

<div id="container"></div>

#container {
  width: 500px;
  height: 500px;
  perspective: 1000px;
}

.cylinder {
  position: relative;
  width: 200px;
  height: 400px;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.cylinder .side {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  opacity: 0.8;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.cylinder .side:nth-child(odd) {
  transform: rotateY(30deg);
}

.cylinder .side:nth-child(even) {
  transform: rotateY(60deg);
}

document.addEventListener("DOMContentLoaded", function() {
  Splitting();
});

var container = document.getElementById("container");
var text = "Dynamic Text";
var chars = text.split("");

chars.forEach(function(char) {
  var span = document.createElement("span");
  span.textContent = char;
  container.appendChild(span);
});

#container span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
}