likes
comments
collection

3D导航栏

作者站长头像
站长
· 阅读数 39

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

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D导航栏</title> <style>

* {
  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>

<body> <ul>

<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>