CSS翻转卡片-如何使正面小于背面

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

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px; /* 设置透视效果，用于实现翻转效果 */
}

.front, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏背面内容 */
}

.front {
  /* 正面样式 */
}

.back {
  /* 背面样式 */
}

.card:hover .front {
  transform: rotateY(180deg); /* 将正面翻转180度 */
}

.card:hover .back {
  transform: rotateY(0deg); /* 将背面翻转回原始状态 */
}

.front, .back {
  transition: transform 0.6s; /* 添加过渡效果，使翻转更加平滑 */
}