3D转换导航栏

来源：互联网发布：sql注入绕过安全狗编辑：程序博客网时间：2024/05/01 08:14

<!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>
 传智播客
 Web前端
 </li>
 <li>
 传智播客
 Web前端
 </li>
 <li>
 传智播客
 Web前端
 </li>
 <li>
 传智播客
 Web前端
 </li>
 <li>
 传智播客
 Web前端
 </li>
 </ul>
</body>

</html>

0 0

3D转换 导航栏

3D转换导航栏