卡片翻转需父容器设flex居中、正反面绝对定位填满并均加backface-visibility: hidden，背面必须自身rotatey(180deg)，且safari需补-webkit-transform-style: preserve-3d。
卡片容器必须用 display: flex + justify-content/align-items
单纯给卡片加 margin: auto 或 text-align: center 是无效的，因为三维翻转依赖 transform-style: preserve-3d，而父容器若没建立正确的块级上下文和居中机制，子元素（正反面）会按默认文档流偏移。最稳的方式是让卡片容器自身在页面中居中——用 Flex 布局，且必须同时设 justify-content: center 和 align-items: center，否则在高度不固定或视口缩放时容易偏位。
常见错误：只写 justify-content: center，结果卡片垂直方向贴顶；或者把居中逻辑写在 .card-front 上，反而破坏翻转轴心。
- 容器需设
height: 100vh或明确高度，否则align-items: center无参照 - 避免给容器设
position: absolute后再用top/left居中——这会让 3D 变换坐标系错乱 - 如果卡片要响应式，建议用
min-height: 100vh替代固定高度，防内容撑开后居中失效
正反面元素必须用 position: absolute + top/left/right/bottom: 0
翻转时，正面和背面需要完全重叠、共享同一旋转中心。靠 margin 或 padding 对齐极易因盒模型差异导致错位，尤其在不同浏览器下 border/padding 渲染有微小偏差。唯一可靠方式是让两个面都绝对定位并填满父容器。
典型错误现象：transform: rotateY(180deg) 后背面文字模糊、边缘露白、或翻转动画抖动——基本都是正反面尺寸或定位没对齐造成的。
- 正反面都要设
position: absolute，且top: 0; left: 0; right: 0; bottom: 0 - 必须设
backface-visibility: hidden，否则背面在翻转过程中可能透出或闪烁 - 不要给正反面单独设
width/height，继承父容器尺寸更稳定
rotateY 翻转时，背面需额外加 transform: rotateY(180deg)
很多人以为只给容器加 rotateY(180deg) 就能让背面显示，其实不然。由于背面元素默认是镜像朝外的，不手动翻转它，内容会左右颠倒。必须对背面元素本身也做一次 rotateY(180deg)，才能让它“正着”面向用户。
这个细节常被忽略，结果就是翻过去后文字反着读，按钮点击区域错位。
- 正面：默认状态，无需额外 rotate
- 背面：除随容器翻转外，还需自身
transform: rotateY(180deg) - 如果用 CSS 动画控制翻转，务必把这两个 rotate 同时写进动画关键帧，不能只动容器
移动端 Safari 的 -webkit-transform-style 兼容必须显式声明
iOS Safari 对 transform-style: preserve-3d 支持较弱，尤其在较老版本（iOS 12–14）中，不加 WebKit 前缀会导致翻转变成立体塌陷成平面切换，失去深度感。这不是 bug，是渲染引擎限制。
不加前缀时，preserve-3d 在 Safari 中可能被静默降级为 flat，你根本看不到报错，但效果就是不对。
- 卡片容器必须同时写：
transform-style: preserve-3d和-webkit-transform-style: preserve-3d - 同理，所有涉及
transform的地方（包括正反面）都建议补上-webkit-transform - 别依赖 Autoprefixer 全包——某些旧版 Safari 对复合 transform（如
rotateY() scale()）仍需前缀才生效
rotateY(180deg) 和 Safari 的 -webkit- 前缀。这两处一错，整个翻转就失焦。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
