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度。它看起来像180deg变换。

在第一个90度之后更改颜色，边框等，以获得更好的视觉效果。

干杯

如何防止div内的文本旋转？

1 个答案: