答案：通过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 结构如下：

<div class="card">
  <div class="card-face front">正面内容</div>
  <div class="card-face back">背面内容</div>
</div>

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，则可以这样写：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

@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);
}

对应的 HTML：

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

这种结构更清晰，利用中间层 .card-inner 控制整体翻转，正背面自动响应。

基本上就这些。掌握 preserve-3d、backface-visibility 和 rotateY 的配合，就能轻松做出流畅的卡片翻转动画。