3D导航栏demo

来源：互联网发布：手机怎么改淘宝店铺名编辑：程序博客网时间：2024/06/10 23:03
<!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;        }        li{            float: left;            width: 120px;            height: 40px;            /* border: 1px solid #000; */            position: relative;            /* transform:rotateY(-40deg) rotateX(-50deg);*/            /*子盒子保持3d效果*/            transform-style:preserve-3d;            /*过渡*/            transition:all 0.5s;        }        li:nth-child(2){            transition:all 0.5s 0.1s;        }        li:nth-child(3){            transition:all 0.5s 0.2s;        }        li:nth-child(4){            transition:all 0.5s 0.3s;        }        li:nth-child(5){            transition:all 0.5s 0.4s;        }        li span{            position: absolute;            top:0;            left:0;            width: 100%;            height: 100%;            text-align: center;            line-height: 40px;            background-color: green;            color:yellow;        }        li span:nth-child(1){            background-color: yellow;            color:green;            transform:rotateX(90deg) translateZ(20px);        }        li span:nth-child(2){            transform:translateZ(20px);        }        ul:hover li{            transform:rotateX(-90deg);        }    </style></head><body>    <ul>        <li>            <span>心之所向</span>2            <span>一往情深</span>        </li>        <li>            <span>心之所向</span>2            <span>一往情深</span>        </li>        <li>            <span>心之所向</span>2            <span>一往情深</span>        </li>        <li>            <span>心之所向</span>2            <span>一往情深</span>        </li>        <li>            <span>心之所向</span>2            <span>一往情深</span>        </li>    </ul></body></html>
阅读全文
0 0