如何用css animation实现卡片翻转效果

要实现卡片翻转效果，需结合CSS的perspective、transform-style和backface-visibility属性。1. 构建包含正反面的.card容器，设置perspective营造3D视觉；2. .card-face共用绝对定位与隐藏背面，front初始rotateY(0deg)，back为rotateY(180deg)；3. 通过@keyframes定义从0deg到180deg的rotateY动画，配合infinite alternate实现循环翻转；4. 添加ease-in-out缓动、hover触发或调整perspective值优化视觉体验。核心是preserve-3d保持3D空间，确保翻转流畅自然。

要实现卡片翻转效果，核心是利用 CSS 的 transform 和 perspective 属性配合 animation 来创建 3D 翻转动画。关键在于设置正确的 3D 空间和翻转轴。

1. 基本结构与样式

先构建一个包含正反面的卡片容器：

<div class="card">
  <div class="card-face front">正面</div>
  <div class="card-face back">反面</div>
</div>

为容器设置透视效果，让 3D 变化更真实：

• perspective：添加到父容器或卡片本身，控制 3D 距离感
• transform-style: preserve-3d：确保子元素在 3D 空间中渲染
• backface-visibility: hidden：隐藏翻转后看不见的一面

2. 关键 CSS 设置

以下是实现翻转的核心样式：

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

41

查看详情

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

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
  animation: flip 3s infinite alternate;
}

.card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: white;
}

.front {
  background: #3498db;
  transform: rotateY(0deg);
}

.back {
  background: #e74c3c;
  transform: rotateY(180deg);
}

3. 定义翻转动效

使用 @keyframes 创建动画，绕 Y 轴旋转 180 度：

@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

动画过程中，front 面从 0° 转到 180°，back 面也同步翻转但因背面不可见，正好在 180° 时显示其正面。

4. 提升视觉效果的小技巧

• 给 .card 添加 transform-style: preserve-3d，确保内部元素保持 3D 空间
• 调整 perspective 数值（如 800px~1200px）获得不同远近感
• 使用 ease-in-out 缓动让翻转更自然：
  animation: flip 3s ease-in-out infinite alternate;
• 可改为 hover 触发：
  .card:hover { transform: rotateY(180deg); } 并移除 animation

以上就是如何用css animation实现卡片翻转效果的详细内容，更多请关注php中文网其它相关文章！