CSS3实现的4种3D文字效果

/* 定义基本的文字效果 */
.text-effect {
  font-size: 7em; /* 字体大小 */
  text-align: center; /* 文字居中 */
  color: #333; /* 文字颜色 */
  margin: 20px; /* 外边距 */
  transform-style: preserve-3d; /* 使3D效果生效 */
  animation: rotate 5s infinite linear; /* 应用旋转动画 */
}
 
/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* 分别应用不同的3D文字旋转效果 */
.effect-1 {
  transform: perspective(200px) rotateX(30deg) rotateY(-30deg);
}
 
.effect-2 {
  transform: perspective(200px) rotateX(30deg) rotateY(30deg);
}
 
.effect-3 {
  transform: perspective(200px) rotateX(-30deg) rotateY(30deg);
}
 
.effect-4 {
  transform: perspective(200px) rotateX(-30deg) rotateY(-30deg);
}
 
/* HTML结构 */
<div class="text-effect effect-1">3D效果1</div>
<div class="text-effect effect-2">3D效果2</div>
<div class="text-effect effect-3">3D效果3</div>
<div class="text-effect effect-4">3D效果4</div>

这段代码展示了如何使用CSS3来创建四种不同的3D旋转文字效果。通过调整rotateX和rotateY的值，可以实现各种3D旋转的文字效果。