<div class="flip-card-container">
<div class="flip-card">
  <div class="flip-card-front">
    <div class="card-content">
      <h3>Front Side</h3>
      <p>Hover me to flip</p>
    </div>
  </div>
  <div class="flip-card-back">
    <div class="card-content">
      <h3>Back Side</h3>
      <p>This is the back of the card</p>
    </div>
  </div>
</div>
</div>

.flip-card-container {
/* 配置3D空间深度 */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* 平滑旋转动画 */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* 对子元素应用 3D 变换 */
transform-style: preserve-3d;
cursor: pointer;
}

/* 悬停时绕 Y 轴旋转 180 度 */
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
/* 翻转时隐藏元素 */
backface-visibility: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: white;
color: #333;
}

/* 初始状态下将后面元素旋转180度 */
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
}

.card-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card-content p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}