不同高度的CSS翻转效果

<div class="flip-container">
  <div class="flipper">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>

.flip-container {
  perspective: 1000px; /* 设置透视距离 */
  margin-bottom: 20px;
}

.flipper {
  position: relative;
  width: 100%;
  height: 200px; /* 设置翻转容器的高度 */
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%; /* 设置前后面的高度与翻转容器相同 */
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background-color: #fff;
}

.back {
  transform: rotateY(180deg);
  background-color: #f9c922;
}