HTML-3D导航

<div class="box">
        <ul>
            <li><a href="#">孤狼</a>
                <a href="#">Wolf</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#">山猫</a>
                <a href="#">Lynx</a>
            </li>
        </ul>
        <ul>
            <li>
                <a href="#">隼</a>
                <a href="#">Falcon</a>
            </li>
        </ul>
    </div>

样式部分

<style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        .box li{
            position: relative;

            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            /* 3D效果 */
            transform-style: preserve-3d;
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }
        .box li a{
            position: absolute;
            left: 0;
            top: 0;

            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        .box li a:first-child{
            background-color: green;
            transform: translateZ(20px);
        }
        .box li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);
        }
        .box li:hover{
            transform: rotateX(-90deg);
        }
    </style>