当前位置：首页 > 文章列表 > 文章 > 前端 > CSS卡片翻转与堆叠动画教程

CSS卡片翻转与堆叠动画教程

2025-09-27 15:00:49 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想要提升网页的交互体验？本文为你揭秘如何使用CSS实现炫酷的卡片翻转与堆叠动画效果。卡片翻转动画利用CSS的3D transform和rotateY属性，配合perspective属性，轻松打造立体翻转效果，完美展示卡片的正反两面信息。而卡片堆叠动画则通过绝对定位和位移，模拟卡片层叠展开的视觉效果，非常适合图集或推荐列表的展示。文章提供简洁易懂的代码示例，并分享优化动画效果的小技巧，助你掌握transform与transition的精髓，打造更流畅自然的网页动画，提升用户体验。赶紧来学习CSS卡片动画的实现方法，让你的网页动起来！

卡片翻转与堆叠动画通过CSS的transform和transition实现，前者利用3D空间和rotateY实现正背面切换，后者通过绝对定位和位移模拟层叠展开效果。

如何用css animation制作卡片翻转与堆叠动画

卡片翻转与堆叠动画是提升网页交互感的常用效果，使用 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);
}