查看 Demo 源码

加载中…

卡片翻面

卡片微交互3D 翻转正反面transform

AI 改造

亮点解析

提前隐藏背面内容 — 两面 absolute 叠加并设 backface-visibility: hidden，翻转中途背面内容不会穿透或闪烁穿帮
单容器整体翻转 — 外层 perspective + 内层 preserve-3d，点击只切换一个 class 旋转内层 180deg，两面内容不重建
如何向 AI 描述 — 说“外层容器 perspective: 600px，内层 transform-style: preserve-3d、transition transform 0.5s；正反两面 absolute inset: 0 叠加，都加 backface-visibility: hidden，背面预设 rotateY(180deg)；点击时内层 rotateY(180deg)”，强调两面都隐藏背面而非只处理背面

适用场景

会员权益卡
商品信息卡
单词记忆卡
仪表盘指标详情