HTML本身不支持3D，真正实现靠CSS的perspective、transform-style: preserve-3d和transform系列函数；perspective必须设在父容器上，preserve-3d需作用于变换父元素以保留子元素Z轴坐标，且Z值须在透视范围内才生效。
直接说结论：HTML 本身不支持 3D，真正实现 3D 效果靠的是 CSS 的 perspective、transform-style: preserve-3d 和 transform 系列函数（如 rotateY、translateZ）。浏览器渲染的是平面像素，所谓“3D”是视觉模拟，关键在空间建模和透视计算。
perspective 必须设在父容器上，不是目标元素本身
很多人把 perspective: 800px 写在要旋转的 .cube 元素上，结果没效果——因为 perspective 定义的是“观察者的位置”，它影响的是**子元素**的 3D 投影。必须写在包含 3D 子元素的**父级容器**上（比如 .scene），子元素才能按真实 Z 轴距离做近大远小缩放。
- 错误写法：
.cube { perspective: 800px; transform: rotateY(45deg); }→ 无效 - 正确写法：
.scene { perspective: 800px; } .cube { transform-style: preserve-3d; } -
perspective值越小（如300px），翻转时边缘拉伸越明显；值越大（如2000px），越接近平行投影，适合 UI 层级感而非强透视 - 注意：该属性不能写在
body或html上“一劳永逸”，它只对直系子元素生效，嵌套深了需逐层设置容器
transform-style: preserve-3d 是子元素保有 Z 轴坐标的开关
没有这句，所有子元素（比如立方体的六个面）都会被强行“拍平”到父元素的 XY 平面上，再怎么 translateZ(100px) 也看不出深度——因为 Z 坐标被丢弃了。只有加了 transform-style: preserve-3d，子元素才各自拥有独立的 3D 坐标系。
- 必须作用于设置了
transform的父元素（如.cube），而不是最外层.scene - 如果子元素还继续嵌套 3D 变换（比如面里再放个图标），那它的父级也得加这句，否则下一级又扁平化
- 某些旧版 Safari 需要加
-webkit-transform-style: preserve-3d兼容 - 别和
backface-visibility: hidden混用错位置：后者应加在每个需要隐藏背面的子元素上（如.face），防止翻转时看到背面内容
rotateX/rotateY/translateZ 组合使用才有立体感
单用 rotateY(180deg) 只是平面翻转；要让元素“立起来”，必须配合 Z 轴位移。比如立方体每个面的 transform 都含 rotateX 或 rotateY 加 translateZ，才能错开前后位置。
立即学习“前端免费学习笔记（深入）”；
- 典型立方体面定位：
.front { transform: translateZ(100px); }，.back { transform: rotateY(180deg) translateZ(100px); } -
translateZ的正负决定前后：正值朝观察者方向移出屏幕，负值推远；但若translateZ绝对值 >perspective值（如perspective: 500px却translateZ(600px)），元素会跑到视点后方，完全不可见 - 避免用
transform: rotateX(45deg) rotateY(45deg)这种多轴叠加写法，浏览器解析顺序可能引发意外偏斜；优先用rotate3d(x, y, z, deg)显式控制轴向 - 动画性能敏感：尽量只对
transform和opacity做transition，避免触发布局重排（left、width等）
表单/表格等语义化元素加 3D 要防交互失效
给 form 或 table 加 rotateX(10deg) 后，按钮点击区域、输入框光标位置可能和视觉位置错位——因为 transform 改变的是渲染层，但事件坐标仍按原始布局计算。
- 解决办法：用
transform-origin调整旋转中心（如transform-origin: top center让表单顶部不动），减少整体位移 - 输入框内文本倾斜后可读性下降，建议只对容器做 3D，内部
input用transform: rotateX(0) rotateY(0)强制复位 - 移动端触摸事件对 3D 元素响应可能延迟，加
touch-action: manipulation提升响应速度 - 别忽略
will-change: transform—— 对频繁动画的元素提前声明，能触发 GPU 加速，但滥用会导致内存占用升高
最容易被忽略的一点：3D 效果是否成立，不取决于你写了多少 transform，而取决于 perspective 是否落在正确的父级、preserve-3d 是否开启到位、以及 Z 轴数值是否在透视范围内。三者缺一，就只是平面动画。调试时先关掉所有动画，用 DevTools 逐层检查 computed style 中的 transform 和 perspective 是否生效，比反复改代码更快。
