纯 CSS 实现 3D 卡片翻转效果

CSS 3D 变换能够创造出令人惊叹的视觉效果。本文将详细介绍如何使用纯 CSS 实现一个精美的 3D 卡片翻转效果。

核心概念

perspective 属性

perspective 属性定义了观察者与 z=0 平面的距离，数值越小，3D 效果越明显。


css
.container {
  perspective: 1000px;
  perspective-origin: center;
}

transform-style

transform-style: preserve-3d 让子元素保持 3D 空间位置。

完整实现


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


css
.card-container {
  width: 300px;
  height: 400px;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-front {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-back {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  transform: rotateY(180deg);
}

进阶技巧

添加阴影增强立体感


css
.card {
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 1px 8px rgba(0, 0, 0, 0.1);
  transition: 
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
}

.card-container:hover .card {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.2);
}