【CSS卡片翻转特效】CSS3实现3D旋转动画卡片翻转效果

/* 定义基本的卡片样式 */
.card {
  width: 300px;
  height: 400px;
  perspective: 1000px;
}
 
/* 定义卡片容器的样式 */
.card-container {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 开启3D空间 */
  transition: transform 1s; /* 定义过渡动画 */
}
 
/* 定义卡片背面的样式 */
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 背面不可见 */
  background: url('back.jpg') no-repeat center center;
  background-size: cover;
}
 
/* 定义卡片正面的样式 */
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('front.jpg') no-repeat center center;
  background-size: cover;
  backface-visibility: hidden; /* 正面不可见 */
}
 
/* 当卡片容器应用旋转时，正面和背面都旋转显示 */
.card-container.flip .card-front {
  transform: rotateY(180deg);
}
 
.card-container.flip .card-back {
  transform: rotateY(0deg);
}
 
/* HTML结构 */
<div class="card">
  <div class="card-container">
    <div class="card-front"></div>
    <div class="card-back"></div>
  </div>
</div>
 
<!-- 使用JavaScript触发卡片翻转 -->
<script>
  const container = document.querySelector('.card-container');
  container.addEventListener('click', function() {
    container.classList.toggle('flip');
  });
</script>

这段代码展示了如何使用CSS3创建一个点击后可以翻转的卡片动画。当用户点击卡片容器时，.flip 类被添加到容器上，导致卡片翻转并展示背面。背景图片和样式已简化，实际应用中需要替换为实际的图片路径和样式。