3D 导航栏源码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style:none; } ul{ width: 600px; margin:100px auto; } ul li{ float: left; width: 120px; height: 40px; position: relative; /*border: 1px solid #000;*/ /*transform:rotateX(30deg) rotateY(-131deg);*/ /* 子盒子保持3d效果*/ transform-style:preserve-3d; /* 过渡*/ transition:all 0.8s; } ul li:nth-child(2){ transition-delay: 0.2s; } ul li:nth-child(3){ transition-delay: 0.4s; } ul li:nth-child(4){ transition-delay: 0.6s; } ul li:nth-child(5){ transition-delay: 0.8s; } li span{ width: 100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 40px; background-color: green; } li span:nth-child(1){ transform:translateZ(20px); } li span:nth-child(2){ background-color: yellow; transform:rotateX(90deg) translateZ(20px); } ul:hover li{ transform:rotateX(-90deg); } </style> </head> <body> <ul> <li> <span>3D导航</span> <span>WEB前端</span> </li> <li> <span>3D导航</span> <span>WEB前端</span> </li> <li> <span>3D导航</span> <span>WEB前端</span> </li> <li> <span>3D导航</span> <span>WEB前端</span> </li> <li> <span>3D导航</span> <span>WEB前端</span> </li> </ul> </body> </html>