关于css:3D导航栏

57次阅读

共计 1248 个字符，预计需要花费 4 分钟才能阅读完成。

<!DOCTYPE html>
<html lang=”en”>

* {
  margin: 0;
  padding: 0;
}

ul {
  margin: 200px 100px;
  /* 增加透视间隔 */
  perspective: 400px;

}

ul li {
  list-style: none;
  float: left;
  width: 180px;
  height: 40px;
  margin: 5px;
}

.box {
  width: 100%;
  height: 100%;
  /* background-color: pink; */
  font-size: 30px;
  color: #000;
  position: relative;
  transition: all .4s;
  /* 保留子元素的 3d 成果 必写 */
  transform-style: preserve-3d;
}

.box:hover {transform: rotateX(90deg);
}

li .child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
li .bottom {
  background-color: purple;
  color: white;
  /* 咱们如果有挪动和其余款式，必须先写挪动 translate */
  transform: translateY(50%) rotateX(-90deg);
}
li .front {
  z-index: 1;
  background-color: pink;
  transform: translateZ(20px);
}

</style>
</head>

<li>
  <div class="box">
    <div class="child front"> 黑马程序员 </div>
    <div class="child bottom">pink 老师等你 </div>
  </div>
</li>
<li>
  <div class="box">
    <div class="child front"> 黑马程序员 </div>
    <div class="child bottom">pink 老师等你 </div>
  </div>
</li>
<li>
  <div class="box">
    <div class="child front"> 黑马程序员 </div>
    <div class="child bottom">pink 老师等你 </div>
  </div>
</li>
<li>
  <div class="box">
    <div class="child front"> 黑马程序员 </div>
    <div class="child bottom">pink 老师等你 </div>
  </div>
</li>

</ul>
</body>

</html>

正文完