HTML-3D导航栏

利用3D转换实现3D导航栏

代码如下：

CSS：

<style>

        * {

            margin: 0;

            padding: 0;

 

        }

        ul {

            margin: 100px;

        }

        ul li {

            float: left;

            margin: 0 15px;

            width: 120px;

            height: 35px;

            list-style: none;

            perspective: 500px;

        }

        .box {

            position: relative;

            width: 100%;

            height: 100%;

            transform-style: preserve-3d;

            transition: all .4s;

        }

        .box:hover {

            transform: rotateX(90deg);

        }

        .front,

        .bottom {

            position: absolute;

            text-align: center;

            line-height: 35px;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            color: blueviolet;

        }

        .front {

            background-color: aqua;

            z-index: 1;

            transform: translateZ(17.5px);

        }

        .bottom {

            background-color: rgb(153, 127, 255);

            /* 位移要放在前面 */

            transform: translateY(17.5px) rotateX(-90deg);

        }

    </style>

HTML：

<ul>

        <li>

            <div class="box">

                <div class="front">3D导航栏</div>

                <div class="bottom">炫酷翻转</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">3D导航栏</div>

                <div class="bottom">炫酷翻转</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">3D导航栏</div>

                <div class="bottom">炫酷翻转</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">3D导航栏</div>

                <div class="bottom">炫酷翻转</div>

            </div>

        </li>

        <li>

            <div class="box">

                <div class="front">3D导航栏</div>

                <div class="bottom">炫酷翻转</div>

            </div>

        </li>

    </ul>

 

效果如图：