3D导航栏

3D导航栏

<ul>
        <li>
            <div class="box">
                <div class="front">门店管理</div>
                <div class="second">权限最高</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">维修明细</div>
                <div class="second">支持EXCEL</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">财务对账</div>
                <div class="second">红杏出墙来</div>
            </div>
        </li>
    </ul>

* {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
        perspective: 500px;

    }

    ul>li {
        width: 120px;
        height: 35px;
        float: left;
        overflow: hidden;
        margin: 0 auto;
        padding: 5px;
        text-align: center;
        line-height: 35px;
    }

    .box {
        position: relative;
        width: 100%;
        height: 100%;
        font-size: 15px;
        transition: all .5s;
        transform-style: preserve-3d;
    }

    .box:hover {
        transform: rotateX(90deg);
    }

    .front,
    .second {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .front {
        background-color: pink;
        z-index: 1;
        transform: rotateZ(17.5px);
    }

    .second {
        background-color: purple;
        /* 如果有移动或者其他样式。必须先写移动 */
        transform: translateY(17.5px) rotateX(-90deg);
    }