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

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

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

1. 基本结构与样式设置

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


  正面内容
  背面内容

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

.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px; /* 创建3D透视感 */
}
.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;
z-index: 2;
}
.back {
background: #e74c3c;
transform: rotateY(180deg); / 背面初始旋转180度 /
}

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

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

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

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

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

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

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

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

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

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