纯CSS可实现3D文字效果：用text-shadow多层偏移模拟纵深（兼容性好、轻量），或用transform-style:preserve-3d+transform实现真3D分层（需字符包裹span、父容器设perspective和preserve-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保证边缘锐利 - 想让文字“凸起”，阴影颜色比文字浅（如白字配浅灰阴影）；想“凹陷”，阴影比文字深（如黑字配深灰阴影）
- 注意：IE9+ 支持，但 Safari 旧版本对多层
text-shadow渲染有性能抖动，别叠超过 8 层 - 动态效果？可以给
text-shadow加transition，但只推荐用于 hover 状态，避免常驻动画拖慢渲染
用 transform + preserve-3d 做真 3D 分层（需父容器配合）
适合需要旋转、透视、Z 轴交互的场景，比如悬停翻转文字，但必须严格满足 DOM 结构和样式条件。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 文字不能直接写在
<h1>里，得拆成每个字符包裹在独立<span>中（可用 JS 拆或手写） - 父容器必须设：
transform-style: preserve-3d;和perspective: 500px;（值越小，3D 感越强） - 每个字符
<span>单独加transform: translateZ(5px);类似操作，Z 值不同才显纵深 - 常见错误：
transform-style写在文字元素自身上无效，必须写在它的**直接父容器**上 - Chrome/Firefox 支持稳定，Safari 对
preserve-3d在内联元素上的支持仍有边界 case，建议外层包<div>并设display: block
字体选择和抗锯齿对 3D 效果影响很大
再好的 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 翻转时闪屏
真正难的不是写出第一行 3D 代码，而是调参时意识到：同一组 translateZ 值在不同屏幕密度、不同字体度量下，视觉厚度差异可能翻倍。动手前先在目标设备上测三组对比值，比死磕文档更管用。
