Appearance
卡片翻转动画
鼠标悬停时卡片以 3D 翻转效果展示背面内容。
实时预览
正面
背面
代码
css
.card { width: 200px; height: 260px; perspective: 600px; }
.card-inner { width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; position: relative; }
.card:hover .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; }
.card-back { transform: rotateY(180deg); }html
<div class="card">
<div class="card-inner">
<div class="card-front">正面</div>
<div class="card-back">背面</div>
</div>
</div>纯 CSS 实现的卡片翻转动画卡片动画效果——通过变换、阴影和滤镜让卡片在悬停时产生层次变化。适用于产品展示、文章列表、个人主页等内容型网站的卡片组件。
快速使用
- 复制 CSS 代码到你的样式文件中
- 在需要应用动画的卡片容器上添加对应的 class
- 根据需要调整卡片的宽高、圆角和内边距
- 修改颜色和阴影值以匹配你的品牌风格
使用场景
- 产品展示卡片：悬停浮起+阴影增强，突出当前关注的商品
- 文章列表：卡片翻转展示标题和摘要的双面信息
- 仪表盘/数据面板：毛玻璃卡片配合模糊背景营造层次感
- 个人主页/简历：3D 倾斜卡片跟随鼠标展示趣味交互
常见问题
Q: 卡片翻转效果如何实现两面不同内容？ A: 使用 transform-style: preserve-3d + backface-visibility: hidden，正面和背面分别放在两个绝对定位的子元素中，背面用 transform: rotateY(180deg) 初始隐藏。
Q: 毛玻璃效果对性能有影响吗？ A: backdrop-filter: blur() 是 GPU 密集型操作。建议只在需要强调的卡片上使用，不要在页面上大量铺开。移动端可以考虑降低模糊半径或关闭毛玻璃效果。
Q: 卡片阴影动画会触发重排吗？ A: box-shadow 的变化会触发重绘（repaint）但不触发重排（reflow）。如果卡片数量多，建议用伪元素 + opacity 过渡模拟阴影变化，避免频繁重绘。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持（含 backdrop-filter） |
| Firefox | ✅ 完全支持 |
| Safari | ✅ 完全支持（需 -webkit-backdrop-filter） |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ❌ backdrop-filter 和 3D transform 不支持 |
使用说明
| 属性 | 说明 |
|---|---|
perspective | 父元素设置 3D 透视距离 |
transform-style: preserve-3d | 保持子元素 3D 空间 |
backface-visibility: hidden | 隐藏背面 |
transform: rotateY(180deg) | Y 轴旋转 180° 实现翻转 |