如何在CSS中使用动画制作卡片翻转旋转_transform rotateY @keyframes实现-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-30 18:58:45

原创

680人浏览过

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

如何在css中使用动画制作卡片翻转旋转_transform rotatey @keyframes实现

想让一张卡片在鼠标悬停时翻转显示背面内容，可以用 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，则可以这样写：

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

查看详情

@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 的配合，就能轻松做出流畅的卡片翻转动画。

以上就是如何在CSS中使用动画制作卡片翻转旋转_transform rotateY @keyframes实现的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css中有哪些命名规范 css中flex-grow属性是什么 css背景中有哪些方法 css中justify-content属性是什么 css中link和@import的区别