CSS3实现3D文字动画效果

要使用CSS3实现3D文字动画效果，你可以通过结合`@keyframes`动画、`transform`属性的`rotateX()`, `rotateY()`, `rotateZ()`, `translateZ()`等函数，以及`animation`属性来实现。以下是一个简单的示例，展示了如何创建一个3D旋转的文字动画效果。

HTML部分：

<div class="animated-text">3D Text Animation</div>

CSS部分：

.animated-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  transform-style: preserve-3d; /* 保持子元素在3D空间 */
  animation: rotateText 10s infinite linear; /* 应用动画 */
}

@keyframes rotateText {
  0% {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0);
  }
  50% {
    transform: rotateY(360deg) rotateX(180deg) translateZ(100px);
  }
  100% {
    transform: rotateY(720deg) rotateX(360deg) translateZ(0);
  }
}

/* 添加一些样式以改善视觉效果 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  perspective: 1000px; /* 设置观察距离 */
}

.animated-text {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
}

在这个示例中，`.animated-text`类用于选择文本元素，并设置其基础样式。`transform-style: preserve-3d;`确保子元素在3D空间中被保留。`@keyframes rotateText`定义了一个名为`rotateText`的动画，它会使文本在Y轴和X轴上旋转，并在Z轴上移动，从而产生3D效果。动画的持续时间为10秒，且无限循环播放。

此外，我还为`body`元素添加了一些样式以改善视觉效果，包括设置背景颜色、使用Flexbox布局将文本居中显示，以及设置观察距离`perspective`，这对于创建逼真的3D效果至关重要。

你可以根据自己的需求调整动画的持续时间、旋转角度、移动距离等参数，以达到所需的3D动画效果。