<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>CSS3 3D转换</title> <style> body { margin: 0; padding: 0; font-family: '微软雅黑'; background-color: #F7F7F7; } .nav { height: 40px; margin-top: 50px; text-align: center; list-style: none; } li { width: 120px; height: 40px; line-height: 40px; float: left; position: relative; transform-style: preserve-3d; transition: all 1s; } li span { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; } li span:nth-child(1) { background-color: green; transform: rotateX(90deg) translateZ(20px); } li span:nth-child(2) { background-color: yellow; transform: translateZ(20px); } .nav:hover li { transform: rotateX(-90deg); } .nav li:nth-child(2) { transition-delay: 0.2s; } .nav li:nth-child(3) { transition-delay: 0.4s; } .nav li:nth-child(4) { transition-delay: 0.6s; } .nav li:nth-child(5) { transition-delay: 0.8s; } </style> </head>
<body> <ul class="nav"> <li> <span>传智播客</span> <span>Web前端</span> </li> <li> <span>传智播客</span> <span>Web前端</span> </li> <li> <span>传智播客</span> <span>Web前端</span> </li> <li> <span>传智播客</span> <span>Web前端</span> </li> <li> <span>传智播客</span> <span>Web前端</span> </li> </ul> </body>
</html>
