CSS-3D导航栏

最新推荐文章于 2024-03-04 20:15:00 发布

王子老师

最新推荐文章于 2024-03-04 20:15:00 发布

阅读量487

点赞数

分类专栏： CSS 文章标签： css 3d css3

本文链接：https://blog.csdn.net/qq_37304462/article/details/121186174

版权

CSS 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

每一次克制自己，都意味着比以往更强大。不去强求任何一段关系，及时很在意，很喜欢。

3D导航栏

请添加图片描述主要知识点：
1、li标签实现多个排列
2、两个盒子，下面的盒子x轴旋转-90,再向y轴移动自身一半距离，前面的盒子向x轴移动自身一半的距离。
3、给父盒子添加 transform-style 开启3d效果
4、父元素添加perspective效果，近大远小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>王子老师CSS进阶</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all .5s;
    }
    
    .box:hover {
        transform: rotateX(90deg);
    }
    
    ul {
        margin: 100px;
    }
    
    ul li {
        float: left;
        width: 120px;
        height: 40px;
        list-style: none;
        line-height: 40px;
        text-align: center;
        perspective: 500px;
        transition: all .4s;
        margin: 10px;
        font-size: 15px;
    }
    
    .front,
    .bottom {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .front {
        background-color: pink;
        z-index: 1;
        transform: translateZ(20px)
    }
    
    .bottom {
        background-color: purple;
        transform: translateY(20px) rotateX(-90deg);
    }
</style>

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

</html>