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) ;
         }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章