perspective 必须加在父容器而非 .card 上，因为它是为子元素创建共享 3D 渲染上下文的观察距离；若设在 .card，则各卡片透视原点独立，导致悬停翻转时轴心偏移、抖动错位。
perspective 必须加在父容器上，不是卡片本身；否则翻转会抖动、错位、轴心偏移。
为什么 perspective 不能写在 .card 上
perspective 定义的是观察者到 3D 平面的距离，它为子元素创建共享的 3D 渲染上下文。如果写在 .card 上，每个卡片都拥有独立的透视原点，悬停时旋转轴不一致，导致视觉错位或抖动。
正确层级是：父容器（如 .card-container）设 perspective: 1000px，.card 作为子元素负责 transform: rotateY()。
- 错误写法：
.card { perspective: 1000px; transform: rotateY(180deg); }——perspective被忽略 - 推荐值范围：
600px～1200px；太小（如300px）易畸变，太大（如2000px）接近平面旋转 - 不要用
transform: perspective(1000px)—— 这是无效语法，perspective是独立 CSS 属性
backface-visibility: hidden 是必填项，不是可选项
不加这句，翻转中途会看到正反面叠加、镜像透出或内容“消失”，尤其在 Chrome 和 Safari 下明显。这不是 bug，而是浏览器默认渲染背面纹理的行为。
- 必须给翻转的两面（如
.card-front和.card-back）都加backface-visibility: hidden - 旧版 Safari 需补充
-webkit-backface-visibility: hidden - 移动端 Safari 对该属性支持不稳定，建议配合
transform-style: preserve-3d使用 - 若想显示背面内容（比如翻过去看文字），需确保背面元素本身有内容且未被
display: none移除 —— 用visibility: hidden或opacity: 0更安全
transform-style: preserve-3d 必须设在卡片容器上
这个属性开启子元素的 3D 空间保留能力。如果漏掉，.card-front 和 .card-back 会被压平成 2D，即使写了 rotateY(180deg)，背面也会不可见或错位飞出。
- 要设在包裹正反面的直接父容器上（如
.card-inner或.card），不是最外层body或.card-container - 初始状态要明确：
.card-front { transform: rotateY(0deg); }，.card-back { transform: rotateY(180deg); }—— 别依赖动画从0deg动到180deg，否则初始背面不可见 - 避免对已设
preserve-3d的容器本身做复合 transform（如同时translate+rotateY），可能触发渲染异常
移动端点击翻转必须用 JS，:hover 基本失效
iOS Safari 和多数安卓 WebView 对 :hover 支持极弱，纯 CSS 悬停在触摸设备上几乎不响应，且存在延迟或误触问题。
- 必须用 JS 监听
click或touchstart，切换类名如is-flipped - CSS 中写：
.card.is-flipped .card-inner { transform: rotateY(180deg); } - 别用
pointer-events: none禁用背面交互——它不阻止事件穿透，反而让点击失效；背面需显式设pointer-events: auto - 性能优化：给翻转元素加
transform: translateZ(0)或will-change: transform，强制 GPU 加速，减少卡顿
最容易被忽略的是三者缺一不可：父容器的 perspective、卡片容器的 transform-style: preserve-3d、正反面的 backface-visibility: hidden。少一个，翻转就可能闪、抖、消失或镜像重叠——不是代码写错了，是 3D 渲染上下文没真正建立起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
