首页 > 文章 > 前端

CSS卡片翻转动画实现教程

时间：2025-10-16 15:27:36 254浏览收藏

想要为你的网站添加酷炫的卡片效果吗？本文将详细介绍如何使用CSS实现卡片旋转动画，让你的网页更具吸引力。通过巧妙地运用`transform`和`transition`属性，配合`:hover`伪类或`@keyframes`动画，即可轻松实现各种卡片旋转效果。本文将重点讲解两种常见的实现方式：**悬停翻转**和**自动旋转**。悬停翻转模拟真实的翻牌效果，当鼠标悬停在卡片上时，卡片会沿Y轴翻转180度，展示背面内容。而自动旋转则让卡片持续绕轴旋转，适用于加载提示或产品展示等场景。通过本文，你将掌握CSS卡片旋转动画的核心技巧，为你的网站注入更多活力。

答案：通过CSS的transform和transition属性结合:hover或@keyframes实现卡片旋转动画。1. 悬停翻转利用perspective、transform-style: preserve-3d和backface-visibility实现3D翻牌效果；2. 自动旋转使用@keyframes定义rotate动画，配合animation属性让卡片持续绕轴转动，适用于加载提示或展示场景。

如何通过css实现卡片旋转动画

通过CSS实现卡片旋转动画，关键在于使用transform和transition属性，配合:hover伪类或@keyframes动画。下面介绍两种常见方式：悬停翻转和自动旋转。

1. 悬停翻转效果（类似翻牌）

创建一个正面和背面不同的卡片，鼠标悬停时沿Y轴翻转180度。

HTML结构：

正面内容

背面内容

CSS样式：

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 提供3D透视感 */
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; / 保持子元素3D空间 /
  transition: transform 0.6s ease;
}

.card:hover .card-inner {
transform: rotateY(180deg); / 悬停时翻转 /
}

.card-front, .card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden; / 背面不可见时隐藏 /
}

.card-front {
background-color: #3498db;
color: white;
}

.card-back {
  background-color: #e74c3c;
  color: white;
  transform: rotateY(180deg); / 初始状态背面朝后 /
}

2. 自动持续旋转动画

让卡片持续绕Z轴或Y轴旋转，适合加载动画或展示用途。

.rotating-card {
  width: 150px;
  height: 150px;
  background-color: #2ecc71;
  margin: 50px auto;
  animation: spin 2s linear infinite; /* 循环播放 */
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

将rotate改为rotateX或rotateY可实现不同轴向的旋转。

关键点说明

perspective：定义3D变换的视觉距离，值越小透视感越强。
transform-style: preserve-3d：确保子元素在3D空间中渲染。
backface-visibility: hidden：避免翻转时看到元素背面内容。
transition：控制翻转动画的缓动和持续时间。
@keyframes：定义复杂旋转路径，比如从0到360度循环。

基本上就这些，不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS卡片翻转动画实现教程》文章吧，也可关注golang学习网公众号了解相关技术文章。