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

如何在CSS中制作卡片翻转动画_transform rotateY结合@keyframes实现

P粉602998670

发布： 2025-11-28 20:39:06

原创

510人浏览过

答案是使用transition结合rotateY实现卡片翻转更高效。通过设置perspective和transform-style: preserve-3d，利用backface-visibility隐藏背面，hover时触发rotateY(180deg)并配合transition实现平滑翻转效果。

如何在css中制作卡片翻转动画_transform rotatey结合@keyframes实现

在CSS中实现卡片翻转动画，可以通过 transform 的 rotateY 属性结合 @keyframes 来完成。这种效果常用于展示卡片背面信息，比如产品介绍、人物名片等。下面详细介绍实现方法。

1. 基本结构与样式设置

先构建HTML结构，通常使用一个容器包裹前后两面：

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

登录后复制

为卡片设置基础样式，启用3D变换效果：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
<p>.card-face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden; /<em> 隐藏背面时不可见 </em>/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}</p><p>.front {
background: #3498db;
z-index: 2;
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg); /<em> 背面初始旋转180度 </em>/
}</p>

登录后复制

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

通过 @keyframes 定义从0到180度的Y轴旋转过程：

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

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

登录后复制

然后将动画应用到整个卡片容器或特定触发状态：

Melodio

Melodio是全球首款个性化AI流媒体音乐平台，能够根据用户场景或心情生成定制化音乐。

110

查看详情

.card:hover .front {
  animation: flip 0.6s forwards;
}
<p>.card:hover .back {
animation: flip 0.6s forwards;
animation-delay: 0.6s; /<em> 等正面翻完再开始翻回 </em>/
}</p>

登录后复制

注意：这种方式适合一次性播放动画。若希望平滑来回翻转，推荐直接使用 :hover 触发 transform 变化并配合过渡（transition）更自然。

3. 更流畅的交互方式：配合 transition 实现双向翻转

虽然 @keyframes 适合复杂帧动画，但简单翻转用 transition 更高效：

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}
<p>.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}</p><p>.card:hover .card-inner {
transform: rotateY(180deg);
}</p><p>.front, .back {
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;
}</p><p>.front {
background: #3498db;
}</p><p>.back {
background: #e74c3c;
transform: rotateY(180deg);
}</p>

登录后复制

此时无需 @keyframes，靠 transition 自动补间动画，鼠标移入即翻转，移出自动复原，体验更自然。