html - 如何防止在div中旋转文本？

Question

我有这样的菜单Fiddle ，我的问题是如何防止在每个 div 元素内旋转文本？

代码:

.myClass{
  background-color: #fff;
  box-shadow: -1px 1px 1px #aaa;
  width: 150px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  margin-right: 2px;
  border-radius: 10px;
  color: #999;
  font-size: 20px;
  transform-style: preserve-3d;
  transition: all 1.0s linear;

}


.myClass:hover{
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}

<div class="myClass">Home</div>
<div class="myClass">Members</div>
<div class="myClass">Pictures</div>
<div class="myClass">Extra</div>

提前致谢

Answer 1

您可以尝试向前旋转 90 度，向后旋转 90 度，而不是 180 度。它看起来像一个 180 度的变换。

改变第一个90deg后的颜色、边框等，以获得更好的视觉效果。

干杯