在css中如何用animation制作卡片翻转3D效果

在CSS中实现卡片翻转3D效果，核心是通过perspective属性设置3D透视空间，结合transform的3D变换函数，再使用animation关键帧控制翻转过程。下面我们来看具体的实现步骤和完整代码。

实现卡片翻转3D效果的核心属性

要实现自然的3D翻转效果，需要用到以下几个关键CSS属性：

• perspective：设置观察者与3D元素之间的距离，值越小透视效果越强，通常设置在800px到1200px之间比较合适。
• transform-style: preserve-3d：让子元素在3D空间中保持3D变换状态，不会平面化。
• backface-visibility: hidden：隐藏元素的背面，避免翻转时正反面同时显示。
• animation：绑定定义好的关键帧动画，控制翻转的时间、速度曲线和循环方式。

完整实现代码

首先我们写HTML结构，卡片分为正面和背面两个子元素：

<div class="card-container">
  <div class="card">
    <div class="card-front">卡片正面</div>
    <div class="card-back">卡片背面</div>
  </div>
</div>

接下来是CSS样式代码，包含基础样式、3D环境和动画定义：

/* 卡片容器，设置透视效果 */
.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px;
  margin: 50px auto;
}

/* 卡片主体，绑定翻转动画 */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cardFlip 3s infinite linear;
}

/* 卡片正反面公共样式 */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

/* 卡片正面样式 */
.card-front {
  background-color: #409eff;
}

/* 卡片背面样式，初始旋转180度，翻转后显示 */
.card-back {
  background-color: #f56c6c;
  transform: rotateY(180deg);
}

/* 定义翻转动画关键帧 */
@keyframes cardFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

代码原理说明

上面的代码中，我们首先给卡片容器设置了perspective: 1000px，建立了3D透视空间。卡片主体开启preserve-3d让两个子元素处于3D空间，正反面都设置了backface-visibility: hidden，保证翻转时只有朝向用户的一面显示。

背面元素初始旋转了180度，这样在卡片翻转前，用户看到的是正面。动画关键帧定义了从0度到360度的Y轴旋转，整个过程持续3秒，无限循环，线性匀速运动，就形成了连续的翻转效果。

效果调整技巧

如果想要调整翻转效果，可以修改以下参数：

• 修改perspective的值，调整3D透视的强弱，值越小翻转时的纵深感越强。
• 修改animation的时间参数，比如把3s改成2s，翻转速度会更快。
• 修改关键帧的旋转角度，比如只旋转到180度就停止，实现点击翻转的交互效果。
• 给卡片添加transition属性，结合hover事件实现鼠标悬停翻转的效果。

如果需要实现点击触发翻转的效果，可以把animation改成transition，然后给卡片添加类名切换，通过JS控制类名的添加和移除即可。

CSS_animation3D_transformcard_flipperspective修改时间：2026-06-16 17:00:17