如何用css实现卡片翻转动画

卡片翻转动画是前端页面中常见的交互效果，通过CSS的3D变换能力就能实现，不需要额外引入JavaScript库，整体实现逻辑清晰，适配性也比较好。

实现卡片翻转的核心原理

卡片翻转的本质是让元素在3D空间内绕Y轴旋转180度，同时控制元素正反两面的显示逻辑。核心用到的CSS属性有三个：

• transform: rotateY()：控制元素绕Y轴旋转的角度，实现翻转的动作
• backface-visibility：控制元素背面是否可见，设置为hidden时，元素旋转到背面就会隐藏
• transition：设置翻转过程的过渡动画，让旋转动作更平滑自然

基础卡片结构搭建

首先需要搭建卡片的HTML结构，卡片需要包含一个容器和两个子元素，分别对应正面和背面：

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <h3>卡片正面</h3>
      <p>这里是卡片正面的内容</p>
    </div>
    <div class="card-back">
      <h3>卡片背面</h3>
      <p>这里是卡片背面的内容</p>
    </div>
  </div>
</div>

CSS样式编写

1. 容器与基础样式

首先给卡片容器设置固定的宽高，开启3D透视效果，让子元素的3D变换生效：

/* 卡片容器，设置透视效果 */
.card-container {
  width: 300px;
  height: 200px;
  perspective: 1000px; /* 3D透视距离，值越小3D效果越强烈 */
  margin: 50px auto;
}

/* 卡片主体，设置过渡动画 */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* 让子元素保持3D变换状态 */
  transition: transform 0.8s ease; /* 翻转过渡动画，时长0.8秒 */
}

/* 卡片正反面公共样式 */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

2. 正反面样式区分

正面默认显示，背面需要先旋转180度，这样初始状态下背面是隐藏的，翻转后才会显示：

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

/* 背面样式，初始旋转180度，背面朝外 */
.card-back {
  background-color: #f56c6c;
  color: #fff;
  transform: rotateY(180deg);
}

3. 翻转触发样式

给容器添加一个翻转的类名，当类名存在时，卡片整体旋转180度，就能实现翻转效果：

/* 翻转状态，卡片整体旋转180度 */
.card-container.flipped .card {
  transform: rotateY(180deg);
}

添加交互触发逻辑

如果需要点击卡片触发翻转，只需要用少量JavaScript切换容器的类名即可：

// 获取卡片容器元素
const cardContainer = document.querySelector('.card-container');
// 点击容器时切换翻转类名
cardContainer.addEventListener('click', function() {
  this.classList.toggle('flipped');
});

注意事项

• perspective属性要设置在卡片的父容器上，不要设置在卡片本身，否则3D效果会不符合预期
• backface-visibility必须设置为hidden，否则正反面会同时显示，看不到翻转效果
• 如果不需要点击触发，也可以通过hover伪类实现鼠标悬停翻转，只需要把.flipped的触发逻辑改成.card-container:hover .card即可
• 翻转时长可以根据需求调整transition的时长参数，让动画速度符合页面整体风格

如果需要实现自动翻转的效果，可以结合CSS动画的@keyframes规则，设置无限循环的旋转动画，调整旋转角度和时长就能实现不同的自动翻转效果。

CSS动画transform属性backface_visibilitytransition3D翻转修改时间：2026-07-10 00:27:25