纯CSS可实现3D文字效果：用text-shadow多层偏移模拟纵深（兼容性好但属视觉欺骗），或用transform-style: preserve-3d配合perspective与translateZ实现真3D分层（需字符独立包裹、父容器设置正确）。
纯 CSS 就能做出有纵深感的 3D 文字，不需要 Three.js 或 WebGL —— 关键是用 text-shadow 叠加多层偏移阴影，或配合 transform-style: preserve-3d + transform 实现真正三维空间中的文字分层。
用 text-shadow 快速模拟 3D 效果（最常用）
这是兼容性最好、写法最轻量的方式，本质是“视觉欺骗”：靠多层同色、微偏移的阴影堆出厚度感。
-
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;—— 每一层 px 值递增，方向固定（右下），模糊值设为0保证边缘锐利 - 想让文字“凸起”，阴影颜色比文字浅（如白字配
#ccc）；想“凹陷”，阴影比文字深（如黑字配#333） - IE9+ 支持，但 Safari 旧版本对多层
text-shadow渲染有性能抖动，别叠超过 8 层 - 可以给
text-shadow加transition，但只推荐用于:hover状态，避免常驻动画拖慢渲染
用 transform-style: preserve-3d 做真 3D 分层（需父容器配合）
适合需要旋转、透视、Z 轴交互的场景，比如悬停翻转文字，但必须严格满足 DOM 结构和样式条件。
- 文字不能直接写在
<h1></h1>里，得拆成每个字符包裹在独立<span></span>中（可用 JS 拆或手写） - 父容器必须设：
transform-style: preserve-3d;和perspective: 500px;（值越小，3D 感越强） - 每个字符单独加
transform: translateZ(5px);类似操作，Z 值不同才显纵深 - 常见错误：
transform-style写在文字元素自身上无效，必须写在它的直接父容器上 - Chrome/Firefox 支持稳定，Safari 对
preserve-3d在内联元素上的支持仍有边界 case，建议外层包<div> 并设 <code>display: block字体与抗锯齿设置直接影响效果质量
再好的 CSS 也救不了字体本身不清晰或渲染发虚的文字。
立即学习“前端免费学习笔记（深入）”；
- 优先选无衬线体：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto；衬线体在小字号 + Z 轴偏移时易出现毛边 - 必须加：
text-rendering: optimizeLegibility;和-webkit-font-smoothing: antialiased;，否则 Chrome 下阴影边缘会糊 - 避免用
font-weight: 100或200做 3D 文字——太细的笔画在叠加阴影后容易粘连、丢失细节 - 移动端需额外加
backface-visibility: hidden;防止 iOS Safari 翻转时闪屏
同一组
translateZ值在不同屏幕密度下表现差异极大真正难的不是写出第一行 3D 代码，而是调参时意识到：同一组
translateZ值在不同屏幕密度、不同缩放比例下，纵深感可能完全失真。你得在真实设备上反复测 —— 尤其是 iPad Pro 和 iPhone 15 Pro 的高 PPI 屏幕，translateZ(3px)可能看起来像没动，而translateZ(8px)又会突兀跳变。 - 优先选无衬线体：
