使用CSS transition结合transform和perspective可实现卡片翻转与堆叠动画。1. 卡片翻转通过rotateY、preserve-3d和backface-visibility实现3D翻转效果；2. 堆叠动画利用transition-delay与transform偏移创建扇形展开；3. 优化性能需避免布局重排，优先使用transform和opacity，配合will-change提升渲染效率。
在现代网页设计中，卡片翻转与堆叠动画能有效提升用户交互体验。CSS transition 是实现这类平滑动画的核心工具之一。它让元素的样式变化不再突兀，而是以流畅的方式过渡。通过合理使用 transition，结合 transform 与 perspective 属性，可以轻松创建出视觉上吸引人的卡片效果。
卡片翻转：利用 transition 实现正反面切换
卡片翻转常用于展示信息的“正面”与“背面”，比如产品介绍卡、记忆卡片等。核心思路是使用 3D 变换（rotateY）配合 transition 控制旋转过程。
关键点：- 为容器设置 perspective，模拟 3D 视角深度
- 卡片本身设置 transform-style: preserve-3d，确保子元素在 3D 空间中渲染
- 前后两面通过绝对定位叠加，使用 backface-visibility: hidden 隐藏不可见面
- hover 时对 rotateY 进行过渡，transition 设置在 transform 上
示例代码片段：
.card-container {
perspective: 1000px;
}
.card {
width: 200px;
height: 300px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
卡片堆叠：逐层展开的过渡效果
堆叠卡片常用于导航菜单或图库预览，鼠标悬停时多张卡片像扇形展开。transition 在这里控制的是位移和旋转的渐变过程。
立即学习“前端免费学习笔记（深入）”；
实现技巧：
- 多个卡片使用绝对定位堆叠在一起
- 通过 JavaScript 或伪类批量控制每张卡片的 transform 偏移
- 为每张卡片设置不同的 transition-delay，形成连贯动画序列
- 可结合 scale 和 translateY 制造层次感
例如，三张堆叠卡片展开可这样设置：
.stack:hover .card:nth-child(1) {
transform: translateY(-20px) rotate(-5deg);
}
.stack:hover .card:nth-child(2) {
transform: translateY(0) rotate(0);
}
.stack:hover .card:nth-child(3) {
transform: translateY(20px) rotate(5deg);
}
.card {
transition: all 0.4s ease;
}
.card:nth-child(1) { transition-delay: 0.1s; }
.card:nth-child(3) { transition-delay: 0.1s; }
优化建议与注意事项
虽然 transition 使用简单，但在复杂动画中仍需注意性能与兼容性。
- 优先对 transform 和 opacity 做过渡，避免触发重排
- 避免对 width、height、margin 等布局属性频繁过渡
- 在移动端测试动画流畅度，必要时添加 will-change 提示浏览器优化
- 考虑使用 @supports 提供降级方案，保证基础功能可用
基本上就这些。掌握 transition 在 transform 上的应用，再结合 3D 属性与延迟控制，就能构建出专业级的卡片动效。不复杂但容易忽略细节。
