翻转卡片必须采用三层结构（.card-container/.card/.card-face）+ perspective设于父容器 + transform-style: preserve-3d和backface-visibility: hidden缺一不可 + .card-back初始rotatey(180deg) + js切类替代:hover，否则必现背面消失、闪烁、错位或纯2d翻转。
直接给结论：翻转卡片不是“加个 rotateY 就完事”，核心是三层结构 + 两个必填样式 + 一个触发逻辑，漏掉任意一项都会导致背面消失、闪烁、错位或纯2D翻转。
perspective 必须写在父容器上，不是 .card 本身
很多人把 perspective: 1000px 直接加在 .card 上，结果翻转像左右镜像，毫无立体感——因为 perspective 定义的是观察者到 z=0 平面的距离，它必须作用于**子元素的共同父容器**，为所有子面提供共享的 3D 渲染上下文。
常见错误写法：.card { perspective: 1000px; transform: rotateY(180deg); } → Safari 和 Chrome 都会忽略该 perspective，退化为平面旋转。
- 正确层级：
.card-container（外层包裹盒）设perspective: 1000px，推荐值范围 800px–1200px；太小（如 300px）会导致背面缩成一条线，太大（如 3000px）接近无透视 - 别用
transform: perspective(1000px)—— 这是无效语法，perspective是独立 CSS 属性，不能塞进transform - 如果父容器本身有
overflow: hidden或transform（哪怕只是translateZ(0)），可能截断 3D 渲染层，导致翻转卡顿或半截消失
transform-style: preserve-3d 和 backface-visibility: hidden 缺一不可
没有 transform-style: preserve-3d，.card-front 和 .card-back 的 3D 变换会被浏览器“拍平”成 2D，rotateY(180deg) 只是左右翻面，不是真实翻转；不加 backface-visibility: hidden，翻转到 90° 左右时正反面会同时显示、文字镜像、内容重叠甚至闪烁。
-
transform-style: preserve-3d必须设在包裹前后两面的**直接父容器**上（通常是.card），不是最外层.card-container，也不是.card-face -
backface-visibility: hidden必须分别加在.card-front和.card-back上 —— 加在.card上无效，该属性只对直系子元素生效 - 旧版 Safari（尤其是 15.4 之前）需要补
-webkit-backface-visibility: hidden，否则背面可能完全不渲染
背面必须预设 rotateY(180deg)，翻转只动容器
翻转动画的本质是让正面转过去、背面转过来。如果只在 hover 时给 .card 加 rotateY(180deg)，而背面没初始化朝后，翻转后看到的就是正面的镜像，或者背面文字反着读。
-
.card-back初始状态必须带transform: rotateY(180deg)，让它默认就背对用户 -
.card-front初始transform: rotateY(0)（可省略） - 翻转动作只控制
.card的transform：hover 或 JS 切类时设transform: rotateY(180deg)，此时正面转到背面位置，背面因已有 180° 基础，正好转成正对用户 - 两面都需
position: absolute; top: 0; left: 0; width: 100%; height: 100%，确保完全重叠，否则翻转时会错位、露白边
:hover 在移动端基本失效，JS 切类才是可靠方案
iOS Safari 和主流安卓 WebView 对 :hover 支持极弱，纯 CSS 悬停在手机上几乎不响应；但用 :active 替代也不行——它只在点击瞬间触发，松手立即回弹，无法保持翻转态。
- 移动端必须用 JS 控制：
element.classList.toggle('is-flipped')，配合.card.is-flipped { transform: rotateY(180deg); } - 避免直接操作
style.transform，容易覆盖其他 transform 值（比如已有translateX） - Safari 15.4 之前对嵌套较深的
preserve-3d支持不稳定，若翻转卡顿或不动，尝试将.card的display改为inline-block（flex 容器内表现更差） - 别加
will-change: transform—— 旧 Safari 下反而引发重绘 bug，得不偿失
最常被忽略的其实是结构嵌套层级和初始状态：你写的 rotateY(180deg) 不是“让背面出现”，而是“让背面从背后转到面前”，前提是它一开始就在背后。一旦结构错一层、backface-visibility 漏一个、preserve-3d 少一个，整个 3D 空间就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
