为什么 transform-style: preserve-3d 在 position: relative 元素上没效果
因为 position: relative 本身不创建新的层叠上下文或 3D 渲染上下文，preserve-3d 只在“有 3D 空间意义”的容器上生效——它需要父容器显式开启 3D 上下文，且不能被中间的层叠/变形打断。
常见错误现象：transform: rotateY(45deg) 看起来是平面旋转、没有纵深；用 perspective 也没用；DevTools 里看到子元素的 z 值似乎被扁平化了。
-
preserve-3d必须设在直接包裹 3D 子元素的父容器上，且该父容器不能有transform（除translateZ等不影响空间结构的）或opacity 、<code>filter等会强制创建新层叠上下文的属性 -
position: relative可以共存，但它不替代transform-style的作用；很多人误以为“定位了就能 3D”，其实只是加了个偏移锚点 - 如果父容器同时用了
transform: translateZ(0)或其他 2D transform，浏览器可能悄悄降级为flat，必须检查 computed style 中transform-style是否真的生效
卡片容器必须用 transform-style: preserve-3d + perspective
只加 preserve-3d 不够，用户看不到“深度”——那只是保留了子元素的 3D 位置信息；真正让眼睛感知纵深的是 perspective，它得加在更外层（通常是卡片父容器），而不是卡片自身。
使用场景：做翻转卡片、倾斜悬停、Z 轴堆叠的交互组件时，perspective 决定“观察者离卡片多远”，值越小透视越夸张，越大越接近正交投影。
立即学习“前端免费学习笔记（深入）”；
- 推荐把
perspective: 1000px设在卡片的直接父容器（比如.card-container），而非卡片本身 -
preserve-3d设在卡片容器（比如.card），它的子元素（如.card__front、.card__back）才能真正按 Z 轴排布 - 避免在
.card上同时写transform: rotateY(0)和preserve-3d—— 某些旧版 Safari 会忽略后者，建议用transform: translateZ(0)做安全兜底
position: relative 的真实用途：控制 3D 变换原点
它不是为了“让 3D 生效”，而是为了配合 transform-origin 把旋转/缩放中心钉在内容区内部（比如让卡片绕中心翻转，而不是绕左上角）。
参数差异：transform-origin 默认是 50% 50%，但若卡片内有 position: relative 的子元素并设置了 top/left，它的 transform-origin 仍以自身盒模型为基准——除非你给它也加 transform-style: preserve-3d（通常不需要）。
- 想让卡片绕自身中心旋转？确保
.card有position: relative，再配transform-origin: center（等价于50% 50%） - 如果卡片内容用了
absolute定位，relative父容器就是它们的定位参考框，不影响 3D 空间，但影响视觉对齐 - 别在
transform动画中动态改top/left——这会触发 layout，和 GPU 加速的transform路径冲突，卡顿明显
容易被忽略的兼容性断点：Safari 15.4 之前不支持嵌套 preserve-3d
如果你的卡片内部还有带 preserve-3d 的子结构（比如背面卡片里再放一个 3D 图标），Safari 15.4 及更早版本会直接忽略内层的 preserve-3d，全部压平。
性能影响：开启 preserve-3d 会让浏览器启用额外的合成层管理，低端设备上过多卡片可能触发内存警告；Chrome DevTools 的 Layers 面板能看到是否意外创建了太多 GraphicsLayer。
- 真要嵌套 3D，优先用单层
preserve-3d+ 精确的transform: translateZ()模拟深度，而不是层层嵌套 - 用
@supports (transform-style: preserve-3d)做基础检测，但别依赖它判断 Safari 版本——实际得查browser.name === 'Safari' && browser.version - 移动端 iOS Safari 对
perspective值敏感，perspective: 200px在 iPhone 上可能过畸变，建议用min(1000px, 100vh)做响应式 fallback
