以下是一个实现不同高度的CSS翻转效果的代码示例：

HTML代码：

  

    

      
正面
    
    

      
背面
    
  

CSS代码：

.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  width: 100%;
  height: 100%;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background-color: #F00;
  transform: rotateX(0deg);
}

.back {
  background-color: #00F;
  transform: rotateX(180deg);
}

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

上述代码使用CSS3的transform属性实现翻转效果。.flip-container类设置perspective属性为1000px，使得元素的子元素可以有立体效果。.flipper类设置transform-style属性为preserve-3d，使得子元素可以相对于父元素进行3D变换。.front和.back类设置了正反面的样式，并使用transform属性实现翻转。当鼠标悬停在.flip-container元素上时，通过改变.flipper元素的transform属性，实现翻转效果。

通过调整.flip-container元素的宽度和高度，可以实现不同高度的翻转效果。