卡片翻转与堆叠动画通过CSS的transform和transition实现，前者利用3D空间和rotateY实现正背面切换，后者通过绝对定位和位移模拟层叠展开效果。
卡片翻转与堆叠动画是提升网页交互感的常用效果，使用 CSS animation 和 transform 可以轻松实现。下面分别介绍两种常见效果的实现方法，代码简洁且兼容性良好。
卡片翻转动画
卡片翻转常用于展示“正面/背面”信息，比如产品介绍或答题卡。核心是利用 3D transform 搭配 perspective 实现立体翻转效果。
关键点：
- 设置父容器的 perspective 来创建 3D 空间
- 卡片本身使用 transform-style: preserve-3d
- 通过 rotateY 控制翻转角度
- 用 backface-visibility 隐藏背面内容
.card-container {
perspective: 1000px;
}
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card:hover {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
background: #3498db;
color: white;
}
.card-back {
background: #e74c3c;
color: white;
transform: rotateY(180deg);
}
卡片堆叠动画
堆叠动画模拟多张卡片层叠，鼠标悬停时逐张展开或滑出，适合展示图集或推荐列表。
立即学习“前端免费学习笔记（深入）”；
实现思路：
- 所有卡片使用 position: absolute 叠在一起
- 通过 hover 触发位移和层级变化
- 用 transition 或 @keyframes 定义动画路径
.stack {
position: relative;
width: 150px;
height: 200px;
}
.stack-item {
position: absolute;
width: 100%;
height: 100%;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stack-item:nth-child(1) { background: #ff7675; }
.stack-item:nth-child(2) { background: #74b9ff; transform: translate(10px, 10px); }
.stack-item:nth-child(3) { background: #00b894; transform: translate(20px, 20px); }
.stack:hover .stack-item:nth-child(2) {
transform: translate(20px, -40px) rotate(-10deg);
}
.stack:hover .stack-item:nth-child(3) {
transform: translate(40px, -70px) rotate(-20deg);
}
优化建议
让动画更流畅自然的小技巧：
- 使用 cubic-bezier 调整缓动曲线，避免生硬
- 开启硬件加速：添加 transform: translateZ(0) 或 will-change: transform
- 控制动画触发频率，避免频繁 hover 导致卡顿
- 在移动设备上考虑触屏体验，可配合 tap 事件增强交互
