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