如何用css animation制作卡片翻转与堆叠动画-css教程-PHP中文网

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

P粉602998670

发布： 2025-09-27 08:02:02

原创

620人浏览过

卡片翻转与堆叠动画通过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);
}

登录后复制

卡片堆叠动画

堆叠动画模拟多张卡片层叠，鼠标悬停时逐张展开或滑出，适合展示图集或推荐列表。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

立即学习“前端免费学习笔记（深入）”；

实现思路：

所有卡片使用 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);
}

登录后复制