翻牌效果需父容器设 perspective、卡片设 transform-style: preserve-3d，正背面均设 backface-visibility: visible，且宽高固定；翻转由卡片整体 transform 控制，背面初始 rotatey(180deg)。
直接用 perspective + rotateY 做翻牌效果，关键不是加动画，而是让前后两面真正“共用一个3D空间”——否则翻转时会错位、穿帮、甚至只动一面。
为什么翻牌后背面看不见？backface-visibility 必须关
默认情况下，元素旋转超过 90° 后，浏览器会隐藏其背面（类似拍照时镜头背对相机），导致翻到一半就消失。这不是 bug，是规范行为。
-
backface-visibility: hidden是默认值，必须显式设为visible才能让背面在翻转过程中正常渲染 - 这个属性要加在「翻转的子元素」上，不是容器；比如卡片正面/背面两个
<div> 都得各自设置 <li>不加这句，Chrome 和 Safari 表现一致（背面消失），Firefox 有时会残留模糊残影，更难调试</li> <h3> <code>perspective到底该写在谁身上？别套在动画元素上perspective不是给翻转的卡片本身加的，而是给它的父容器（即 3D 空间容器）加的。写错位置会导致透视畸变或完全失效。- 正确：父容器（如
<div class="card-container">）设 <code>perspective: 1000px - 错误：直接写在
.card-front或.card-back上 —— 这会让每个面各自建一个 3D 空间，无法对齐 - 数值越小，透视感越强（翻转像凑近看），但太小（如
200px）容易导致背面缩成一条线；建议从800px–1200px起调 - 必须加在「直接包含前后两面」的父元素上（通常是卡片本体，不是最外层容器）
- 常见结构：
<div class="card-container"><div class="card"> <div class="card-front">...</div> <div class="card-back">...</div> </div></div>→perspective在.card-container，transform-style: preserve-3d在.card - 漏掉这句，
rotateY(180deg)看起来就像左右镜像翻转，毫无深度 - 初始状态：
.card的transform: rotateY(0)；.card-back单独加transform: rotateY(180deg)（让它一开始就是背对用户） - 翻转时：只改
.card的transform: rotateY(180deg)，此时正面转到背面位置，背面因已有 180° 基础，正好转成正对用户 - 动画需加在
.card上，且transform属性必须带transition，否则无过渡
transform-style: preserve-3d是翻牌成立的前提没有它，子元素的 3D 变换会被“拍平”成 2D，所有
rotateY都只是平面旋转，根本形不成翻牌立体感。翻转动画触发时，别只动一面：用
transform控制整个卡片很多人给
.card-front加rotateY(180deg)，再给.card-back加rotateY(0)，结果两面不同步、有缝隙。正确做法是只控制父卡片的transform，靠初始rotateY把背面预设好。最易被忽略的一点：所有参与 3D 的元素（前后两面）必须有明确的
width和height，且不能依赖content自撑开；否则在某些 zoom 比例或字体加载延迟下，尺寸抖动会导致翻转轴偏移、卡顿或跳帧。 - 正确：父容器（如
