不同高度的CSS翻转效果

在CSS中实现不同高度的翻转效果，可以使用CSS的3D变换和过渡属性

HTML结构：

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

CSS样式：

.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;
}

在这个例子中，.flip-container是翻转效果的容器，.flipper是实际进行翻转的元素，而.front和.back则是翻转前后的两个面。

通过设置.flip-container:hover .flipper的transform属性为rotateY(180deg)，当鼠标悬停在容器上时，.flipper会绕Y轴旋转180度，从而实现翻转效果。