卡片翻转与堆叠动画通过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 事件增强交互
基本上就这些，不复杂但容易忽略细节。掌握 transform 与 transition 的配合，就能做出高质量的卡片动画。
以上就是如何用css动画 css ai 硬件加速 绝对定位 css 堆 事件 position transform transition animation