🔄
CSS 翻转卡片
生成鼠标悬停或点击时 3D 翻转的双面卡片，自定义正反内容与方向，复制代码。
本地处理 · 不上传
加载工具中…
相关：翻转卡片 · flip card · 3d · hover · css
CSS 翻转卡片生成悬停或点击时翻面的卡片效果，可选水平垂直翻转方向与动画时长，用纯 CSS 的 3D 变换实现。
使用步骤
- 设置正反两面内容
- 选择翻转方向与时长
- 预览翻转效果
- 复制 HTML 与 CSS
使用场景
- 制作单词记忆卡片
- 产品展示的正反面信息
- 团队成员卡片的详情展示
- 知识问答的翻面查看答案
小贴士
- 关键是三件事：父容器设 perspective、翻转容器设 transform-style: preserve-3d、背面设 backface-visibility: hidden。少一个就不对。
- 两面必须绝对定位重叠在一起，背面预先旋转 180 度，这样翻转后它才是正的。
- 悬停触发在触屏上无效，移动端应改为点击切换类名。
常见问题
翻过去看到的是镜像文字？
背面没有预先旋转 180 度。背面元素本身要设 `transform: rotateY(180deg)`，容器翻转后它才正好转正。
翻转时两面同时可见？
缺了 `backface-visibility: hidden`，或者父级没设 `transform-style: preserve-3d`。这两个属性缺一不可，且要设在正确的层级上。
手机上怎么触发？
触屏没有悬停，需要用 JavaScript 在点击时切换一个类名来触发翻转。纯 CSS 方案可以用隐藏的 checkbox 配合 :checked 实现。
CSS 翻转卡片是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 翻转卡片，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。