首页手记看完练习3D导航，写了个简易版，有助理解

看完练习3D导航，写了个简易版，有助理解

标签：

Html/CSS CSS3

看了练习3D导航转换，着实一脸懵逼，看了近两天时间，写了个小的3D转换，此代码相对较少，比较容易理解；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li{width:200px;list-style: none;}
            a{
                text-decoration: none;
                display: block;
                font-size: 20px;
                line-height: 20px;
                padding: 15px 30px 15px 31px;
                color: #fff;                
                position: relative; 
                perspective: 200px;     /*设置3D舞台布景,仅对子元素产生效果,数值越小，靠近屏幕低端的一侧会越长等...，建议先单独去研究一下*/ 
                text-align: center;
            }   
            .tD-box{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;    
                top: 0;
                transition: all .3s ease-out;
                transform: translateZ(-25px);    /*因为li高度为50px,所以这里设置-25px,.front和.back设置为25px*/
                -webkit-transform-style: preserve-3d;  /*使被转换的子元素保留其 3D 转换*/
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }           
            .front{
                background: #006666;
                transform:rotateX(0deg) translateZ(25px);  /*rotateX和translateZ位置不可调换,执行顺序会不同,效果也不同*/
            }
            .back{
                transform:rotateX(-90deg) translateZ(25px);
                }
            .front,.back{
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top:0;
                padding: 15px 30px 15px 31px;
                -webkit-pointer-events: none;  /*允许点击穿透,可自行了解*/
                -moz-pointer-events: none;
                -ms-pointer-events: none;
                -o-pointer-events: none;
                pointer-events: none;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                }
            .back{
              background-color: #51938f;
              background-size: 5px 5px;
              background-position: 0 0, 30px 30px;
              background-color: #aba09e;
              background-image: -webkit-linear-gradient(top left, #aba09e, #818181);
              background-image: -o-linear-gradient(top left, #aba09e, #818181);
              background-image: linear-gradient(to bottom right, #aba09e, #818181);
            }
            a:hover .tD-box{                
                transform: translateZ(-25px) rotateX(90deg);                
            }   
        </style>
    </head>
    <body>
        <div class="tD">
            <ul>
                <li><a href="">
                    Home
                    <span class="tD-box"><span class="front">Home</span><span class="back">Home</span></span>
                </a></li>
            </ul>
        </div>
    </body>
</html>

点击查看更多内容