HTML+css做炫酷的3d盒子反转

3d盒子反战

效果如图如下：

HTML重要的代码如下：

 <ul>
        <li>
            <div class="box">
                <div class="front">目录</div>
                <div class="bottom">市场调研</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">目录</div>
                <div class="bottom">市场测试</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">目录</div>
                <div class="bottom">市场招聘</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">目录</div>
                <div class="bottom">市场开展</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">目录</div>
                <div class="bottom">市场研究</div>
            </div>
        </li>
    </ul>

css代码如下：

 * {
             margin: 0;
             padding: 0;
         }
         * {
             list-style: none;
         }
         ul {
            
             margin: 100px;
             
         }
         ul li {
             float: left;
             width: 120px;
             height: 35px;
             margin-left: 10px;
         }
         .box {
             position: relative;
             font-size: 16px;
             text-align: center;
             line-height: 35px;
             width: 100%;
             height: 100%;
             transform-style: preserve-3d;
             transition: all .4s;
         }
         .box:hover {
             transform: rotateX(90deg);
         }
         .front,
         .bottom {
             position: absolute;
             width: 100%;
             height: 100%;
             left: 0;
             top: 0;
         }
         .front {
             background-color: pink;
             z-index: 1;
             transform: translateZ(17.5px);
         }
         .bottom {
             background-color: red;
             transform: translateY(17.5px) rotateX(-90deg) ;
         }