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

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

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

卡片翻转动画

卡片翻转常用于展示“正面/背面”信息，比如产品介绍或答题卡。核心是利用 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);
}