backface-visibility: hidden 必须同时加在正反两面元素上，因该属性控制自身背面渲染而非朝向；只加背面会导致翻转中途正面背面同时可见、文字透出或闪烁。
背面内容错位、消失或透出正面，根本不是定位写错了，而是 backface-visibility: hidden 没加对位置，或 position: absolute 的父容器没设 position: relative。
为什么正反面必须都加 backface-visibility: hidden
该属性控制的是「元素自身背面是否渲染」，不是「当前朝外的面是否显示」。翻转过程中，.front 的背面会朝前，.back 的正面也会朝前——若只给 .back 加，.front 的背面在旋转中途就会透底，尤其在 Chrome 和 Safari 下明显可见文字穿透、闪烁。
-
.front, .back { backface-visibility: hidden; }必须共用，不能拆开写或只作用于一个选择器 - 该属性不继承，不能靠父容器设置传递
- 旧版 Safari（transform: translateZ(0) 触发硬件加速
为什么 position: absolute 的父容器必须是 position: relative
absolute 元素的 top: 0; left: 0 是相对于「最近的已定位祖先」计算的。如果没设 position: relative，它就会上溯到视口，导致多个卡片的正反面全部叠在页面左上角，hover 失效、z-index 错乱。
- 直接包裹
.front和.back的容器（如.card-inner或.card）必须设position: relative - 若卡片本身是
grid子项，别在.card上写top/left——这会让它脱离 grid track；改用place-self或justify-self调整位置 - 确保该父容器有明确宽高，否则
absolute子元素会塌陷成 0×0
为什么 perspective 和 transform-style: preserve-3d 不能写错位置
perspective 必须写在「翻转容器的父级」，而 transform-style: preserve-3d 必须写在「实际执行翻转的容器」上。写反或遗漏，会导致 rotateY/rotateX 被浏览器压平为 2D，背面直接不可见或坐标计算失真。
- 结构如
.grid → .card → .front/.back：则perspective: 1000px加在.grid，transform-style: preserve-3d加在.card - 数值推荐 300–1200px：卡片越小，值越小；太大（如 10000px）几乎无 3D 感，太小（如 50px）变形夸张
- 不要把
perspective和transform都写在.front上——每个面各自有 perspective，空间关系彻底混乱
移动端点击失效或 Safari 闪屏怎么修
iOS Safari 对 rotateY + absolute 的合成层处理敏感，事件捕获和帧率容易出问题，不是动画写得不够顺，而是渲染上下文没配齐。
- 只在
.front和.back上加will-change: transform，别加在.card或网格容器上——加错位置反而引发重排 - 翻转动画统一用
transform: rotateY(180deg)，避免混用rotateX；Safari 对 rotateX 的 GPU 合成支持不稳定 - 过渡时间控制在 300ms–450ms；太短突兀，太长易被降级为软件渲染
- 纯 CSS
:hover在移动端无效，需补 JS 监听click或touchstart切换 class，并给.front/.back设pointer-events: none，让交互始终落在.card容器上
最常被忽略的一点：所有这些属性（backface-visibility、position、perspective、transform-style）必须按层级严格对应，缺一环，整个 3D 空间就塌了——不是“差不多能看”，而是背面要么飘走、要么透底、要么点不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
