transform-style: preserve-3d 必须加在直接包裹正反面的容器（如.card）上，仅对直系子元素生效；perspective 应设在共同父容器（如.cards-grid），backface-visibility: hidden 需同时作用于正反面，transition 必须写在默认状态且初始 transform 不能为 none。
直接加 transform-style: preserve-3d 不起作用？那大概率是它没加对位置，或者被父级的 overflow: hidden 或默认 transform-style: flat 覆盖了。
为什么 transform-style: preserve-3d 必须写在卡片容器上
浏览器默认把所有子元素压平到同一个 2D 平面渲染，transform-style: preserve-3d 的作用就是告诉它：“别拍扁，让子元素保留在各自的 Z 轴位置”。但它只对**直系子元素**生效，不能穿透多层嵌套。
- ✅ 正确：加在
.card或.card-inner这类直接包裹正反面的容器上 - ❌ 错误：加在
.card-front或.card-back上——它们是叶子节点，没有子元素需要“保持 3D” - ⚠️ 常见干扰：父容器（如
.card-wrapper）设了overflow: hidden，会裁掉旋转中伸出的背面，看起来像卡住
perspective 放错地方会导致翻转抖动或轴偏移
perspective 是定义“观察者眼睛离 3D 场景多远”，不是贴在翻转元素身上的贴纸。它必须作用于所有卡片共享的同一视觉原点。
- ✅ 推荐：设在卡片共同父容器上，比如
.cards-grid { perspective: 1000px; } - ❌ 危险：每个
.card { perspective: 1000px; }—— 每张卡片自建小宇宙，hover 时视角不一致，翻转轴晃动、边缘畸变 - ?
perspective值建议 600px～1200px；小于 400px 易拉伸变形，大于 2000px 几乎看不出 3D 感
backface-visibility: hidden 漏设会让翻转后内容“透底”
翻转到 180° 时，正面和背面在空间中其实是重叠的。如果不显式隐藏背面，Chrome 和 Safari 会同时渲染两面，导致文字重影、颜色发灰、甚至显示空白（因为背面遮住了正面）。
- ✅ 必须给正反两面都加：
.card-front, .card-back { backface-visibility: hidden; } - ❌ 只加在容器上无效；加在
:hover里更不行——它得始终生效 - ⚠️ 移动端旧 Safari 对
backface-visibility支持不稳定，若发现 iOS 上翻转后消失，可补一句transform: translateZ(0)强制触发 GPU 渲染
transition 写在 :hover 里就等于没写动画
过渡效果只在属性值变化时触发。如果 transition 只写在 :hover 中，那么鼠标移入有动画，移出时会瞬间切回原状——这就是所谓“啪一下跳回去”。
- ✅ 正确写法：transition 必须放在默认状态（非 hover）中，例如
.card-inner { transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1); } - ❌ 避免混用多个可动画属性：
transition: transform 0.5s, opacity 0.5s容易因帧率不同步造成撕裂感 - ⚠️ 初始
transform值不能是none——得写明确值，比如transform: rotateY(0deg)，否则从none→rotateY(180deg)无法插值
最常被忽略的一点：正反面元素必须尺寸完全一致，且用 position: absolute 叠在一起。哪怕差 1px，翻转过程就会出现错位或布局跳动——这和 3D 设置无关，是基础定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
