一天一代码之CSS3 3D动画 导航栏案例

效果图如下:

CSS代码如下:

 * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 1000px;
            height: 200px;
            margin: 200px;
        }
        
        ul li {
            float: left;
            width: 200px;
            height: 200px;
            margin-left: 50px;
            /* 给了perspective之后宽度就会产生变化 */
            perspective: 800px;
            list-style: none;
        }
        
        .box {
            /* 旋转的盒子不能给定位的位置属性,否则旋转的中心点就会发生偏移 */
            position: relative;
            height: 200px;
            width: 200px;
            transition: all 1s;
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .front,
        .bottom {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
        
        .front {
            background-color: pink;
            /* 这里要将前面的向前移动不能移动bottom的Z轴 */
            transform: translateZ(100px);
        }
        
        .bottom {
            background-color: purple;
            transform: translateY(100px) rotateX(-90deg);
        }

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>
    </ul>

如有疑问欢迎评论区评论