css制作3D立体文字

<div class=“text3d”>
<span> Hello World</span>

</div>
<style>
.text3d {
  display: inline-block;
  font-size: 60px;
  perspective: 500px; /* 相机距离 */
}


.text3d > span {
  display: block;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

.text3d:hover > span {
  transform: rotateX(360deg) rotateY(360deg);
}

</style>

当鼠标悬停在.text3d元素上时，通过改变.text3d > span的transform属性，可以使文字旋转形成3D效果。这里使用了perspective属性来创建一个近大远小的视觉效果，使3D旋转更加立体。

要为每个字母创建3D效果，可以将每个字母放在单独的<span>标签中，并对每个<span>应用不同的旋转和位置。

注意：以上代码示例为了简洁，省略了对字母进行具体旋转和位置的CSS规则。在实际应用中，你需要为每个字母指定不同的旋转角度和位置，以创建复杂的3D效果。