必须在父容器上设perspective，子元素用transform-style:preserve-3d，否则Z轴操作仅为平面投影；因preserve-3d仅保留子元素3D位置，不提供透视，需perspective定义观察距离才能生成真实纵深感。
必须在父容器上设 perspective，子元素用 transform-style: preserve-3d，否则所有 Z 轴操作都只是平面投影，没有真实纵深感。
为什么 transform-style: preserve-3d 单独加没用
很多人给卡片元素直接加 transform-style: preserve-3d，再写 rotateY(45deg)，结果还是像贴纸一样平转——因为 preserve-3d 只负责“保留子元素的 3D 位置”，它不产生透视。浏览器需要一个观察距离（即 perspective）才能把 Z 值映射成视觉上的远近缩放。
-
perspective必须设在**包含 3D 子元素的最近父容器**上，不是卡片自身；例如卡片是.card，那perspective应该写在.card-container - 如果父容器同时有
opacity: 0.99、filter: blur(1px)或任意transform（如translateX），会强制创建新层叠上下文，打断 3D 空间链，preserve-3d失效 - 检查 DevTools 的 computed style，确认
transform-style确实为preserve-3d，而不是被浏览器悄悄降级为flat
perspective 和 perspective-origin 怎么配才自然
默认 perspective: 1000px + perspective-origin: 50% 50% 是最稳妥的起点，但实际效果取决于内容尺寸和交互意图：
-
perspective值越小（如400px），透视越夸张，适合强调翻转动效；值越大（如2000px），越接近正交投影，适合 Z 轴堆叠类布局 -
perspective-origin改变的是“眼睛的位置”，不是元素旋转中心；想模拟低头看卡片？设perspective-origin: 50% 70%；想模拟仰视？用50% 30% - 不要在同一个元素上既写
perspective: 1000px，又写transform: perspective(1000px)，后者会覆盖前者且行为不可控
定位与原点：为什么 position: relative 不是可有可无
position: relative 在 3D 场景里唯一关键作用是配合 transform-origin 锚定变换中心——它本身不开启 3D，但能让旋转/缩放按预期发生：
- 卡片默认
transform-origin: 50% 50%，但这是相对于其 border box 的中心；若卡片内有position: absolute子元素，它们的定位参考仍是这个相对定位框，不影响 3D 空间，但影响视觉对齐 - 想让卡片绕内容区中心翻转，而不是左上角？确保卡片有
position: relative，再配transform-origin: center - 避免给卡片同时加
transform: rotateY(0)和preserve-3d，某些旧版 Safari 会忽略后者；可用transform: translateZ(0)安全兜底
真正容易被忽略的点是：perspective 和 preserve-3d 必须分层设置，且中间不能插入任何会触发新层叠上下文的属性；一旦某一层“断掉”，Z 轴就塌陷回二维——这时再调 rotateZ 或 translateZ，看到的永远只是大小变化或错位，不是空间位移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
