CSS3-3D导航(transform:rotate)

借助transform:rotate实现上图的3D导航效果 

具体代码如下

    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">index</a>
            </li>
            <li><a href="#">新闻</a>
                <a href="#">news</a>
            </li>
            <li><a href="#">产品</a>
                <a href="#">product</a>
            </li>
            <li><a href="#">关于</a>
                <a href="#">about</a>
            </li>
        </ul>
    </div>

<style>
    .nav {
        margin: 200px auto;
        width: 600px;

    }

    ul {
        list-style: none;
    }

    .nav li {
        float: left;
        position: relative;
        width: 100px;
        height: 50px;
        line-height: 50px;
        /* 需要在父元素设置transform-style:preserve-3d 以实现子元素的3d效果 */
        transform-style: preserve-3d;

        transition: all .5s;
    }

    .nav li a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
    }

    .nav li a:first-child {
        transform: translateZ(25px);
        background-color: green;
    }

    .nav li a:last-child {
        /* 此时橙色盒子躺平之后，需要俯视才能看到橙色盒子，看它的方向始终是Z轴方向，所以这里要向Z轴移动，相当于旋转的时候它的三个轴也会跟着旋转 */
        transform: rotateX(90deg) translateZ(25px);
        background-color: orange;
    }

    .nav li:hover {
        transform: rotateX(-90deg);
    }
</style>

rotate旋转的时候遵循左手法则：轻握左手，大拇指指向旋转轴正方向，四指指向的方向就是旋转方向。屏幕到眼睛方向为rotate的Z轴正方向，水平为X，垂直是Y，如下图所示