卡片翻转
Card Flip
初级通用卡片翻转（Card Flip）是让一张卡片像实物一样绕轴转 180°，从正面翻到背面。正面放最关键的信息（价格、单词），背面放补充内容（权益、释义），在有限的空间里放下两层信息，翻的过程本身也很有趣。
你可能会说：「会员套餐卡片能不能做成点一下翻过来，背面显示详细权益的那种效果？」
读之前建议先了解
动手看看翻过来看会员权益
要点卡片翻转是怎样起作用的？
- 1
两个面叠在一起，翻的是容器
正面和背面是两个叠在同一位置的元素，背面预先转了 180°（背对着你）。翻转时转的是装着它们的容器：容器转 180°，正面转到背后，背面转到前面。容器要写 transform-style: preserve-3d，两个面才会在 3D 空间里各有朝向，而不是被压平成一张。
- 2
三个最常见的坑
第一，父元素没有 perspective，翻转看起来只是卡片变窄再变宽，像被压扁。第二，两个面没写 backface-visibility: hidden，翻到一半以后，正面的字会以镜像的样子透过来，和背面叠在一起。第三，容器没有 preserve-3d，背面怎么都翻不出来。效果不对时，按这三项逐个检查。
- 3
翻转要能用键盘触发
只做悬停翻转，手机用户（没有悬停）和用键盘的用户就看不到背面。更稳妥的是用一个真正的按钮触发翻转，翻过去后把看不见的那一面对读屏隐藏，避免两面的内容被同时读出来。时长一般 500~800 毫秒，开启减少动效时改成直接切换或淡入淡出。
容易混淆的地方
卡片翻转是 3D 变换的一种具体用法，透视、preserve-3d、backface-visibility 都是它依赖的基础属性。它也不同于折叠面板：折叠面板是在原位置展开更多内容、页面会变长；卡片翻转是在同一块空间里切换两面，大小不变。
什么时候用
适合用
- 会员或套餐卡片，正面是价格，背面是详细权益，节省版面。
- 背单词、知识点复习类产品，正面题目，点一下翻到背面看答案。
- 团队介绍页，正面照片和名字，背面是个人简介。
不适合用
- 背面内容和正面同样重要、用户需要对比时，别藏到背面；直接并排展示。
- 背面内容很长、需要滚动时，别塞进翻转卡片；用折叠面板或详情页。
- 表单的一部分别做在卡片背面；用户填到一半翻回去，很容易以为内容丢了。
练一练选一个答案，看看解释
你做的翻转卡片翻到背面时，正面的价格以镜像的样子透出来，和背面的权益叠在一起。该怎么修？
让 AI 帮你做复制给 AI Agent 直接用
请把【需要两面展示的卡片，如：定价页的会员套餐卡片】做成点击翻转。先阅读卡片组件和样式写法。要求：外层加 perspective（约 1000px），卡片容器设 transform-style: preserve-3d，正面和背面叠放、都设 backface-visibility: hidden，背面预先旋转 180°；用一个真正的按钮触发翻转，键盘可操作，看不见的一面对读屏隐藏；翻转 500~800 毫秒。开启减少动效时改为淡入淡出切换。卡片尺寸不能因翻转变化。沿用现有组件，不改无关代码。最后说明怎样验证：翻面后没有镜像文字透出，用 Tab 键也能翻转。