如何在CSS中使用动画制作卡片翻转旋转_transform rotateY @keyframes实现_技术教程

答案：通过HTML结构与CSS的transform、rotateY及transition实现卡片翻转，利用preserve-3d创建3D空间，backface-visibility隐藏背面，hover时旋转card-inner容器使正背面翻转，无需JavaScript即可完成动画效果。

想让一张卡片在鼠标悬停时翻转显示背面内容，可以用 CSS 的 transform、rotateY 和 @keyframes 实现。整个过程不需要 JavaScript，只需结构化的 HTML 和精心编写的 CSS。

1. 基本结构：创建卡片容器

卡片翻转需要一个外层容器（card），内部包含正面和背面两个面。使用 transform-style: preserve-3d 保持3D空间，这是实现翻转的关键。

HTML 结构如下：

  正面内容
  背面内容

2. 设置3D空间与隐藏背面

CSS 中要为父容器启用3D变换，并确保两面在翻转过程中正确显示或隐藏。

关键样式包括：

设置 perspective 给视觉深度感
使用 transform-style: preserve-3d 让子元素处于3D空间
通过 backface-visibility: hidden 隐藏元素背面（比如翻转180度后不显示正面）

示例CSS：

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px;
  position: relative;
}

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

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

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

3. 使用 @keyframes 定义翻转动画

你可以用 @keyframes 明确定义旋转过程，也可以直接用 transition 实现平滑过渡。如果要用 keyframes，则可以这样写：

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

@keyframes unflip {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

然后绑定到 hover 状态：

.card:hover .front {
  animation: flip 0.6s forwards;
}

.card:hover .back {
  animation: unflip 0.6s forwards;
}

不过更常见且简洁的方式是使用 transition：

.card:hover .front {
  transform: rotateY(-180deg);
}

.card:hover .back {
  transform: rotateY(0deg);
}

.card-face {
  transition: transform 0.6s ease;
}

注意：当正面旋转 -180deg，背面从 180deg 转为 0deg，视觉上就完成了“翻转”效果。

4. 完整简化版示例（推荐）

结合以上要点，最实用的写法如下：

.card {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

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

.front {
  background: #3498db;
}

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