卡片翻转 Card Flip

**卡片翻转（Card Flip）**是让一张卡片绕纵轴（或横轴）转 180°，翻出背面的另一套内容。它由三个 CSS 属性配合完成：父容器 perspective 提供透视深度，卡片 transform-style: preserve-3d 让子层参与三维空间，正反面 backface-visibility: hidden 各自只在朝向观众时可见。

什么时候用：正反两套信息天然成对的场景——商品卡正面图/背面参数、记忆卡片正面问题/背面答案、会员卡正反面。它是“塞进更多内容又不显拥挤”的经典解法。

对 AI 说清楚的三要素：① 翻转轴（rotateY 纵轴 / rotateX 横轴）；② 时长 0.6~0.8s 带缓动；③ 触发方式（悬停 or 点击——移动端没有悬停，务必用点击）。

卡片悬停触发 3D 翻转（Card Flip）：外层 perspective: 900px，
卡片 transform-style: preserve-3d，rotateY(0deg→180deg)，
时长 0.7s；正反面 backface-visibility: hidden 各自承载不同内容。