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