课堂案例之3D导航栏

最新推荐文章于 2024-05-25 11:49:01 发布

小王小王几点了

最新推荐文章于 2024-05-25 11:49:01 发布

阅读量181

点赞数 4

分类专栏： CSS3 文章标签：前端 css3 html5 3d

本文链接：https://blog.csdn.net/weixin_64875217/article/details/127943915

版权

CSS3 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

课堂案例之3D导航栏

1 实现步骤
2 界面实现

1 实现步骤

搭建HTML结构
li做导航栏。
.box是翻转的盒子，front是前面盒子，bottom是底下盒子。

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

CSS样式：
bottom先向下(y轴)走17.5px。(注意：先移动后旋转)
front向前移(z轴)17.5px。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            margin: 100px;
        }
        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            list-style: none;
            /* 加透视效果 */
            /* 一会需要给box旋转 也需要给box的父盒子加透视 干脆直接给li加 里面的子盒子都有透视效果 */
            perspective: 500px;
        }
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* 保留3d立体空间 */
            transform-style: preserve-3d;
            /* 过渡效果 */
            transition: all .4s;
        }
        .box:hover {
            transform: rotateX(90deg);
        }
        .front,
        .bottom {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 35px;
            text-align: center;
        }
        .front {
            background-color: pink;
            z-index: 1;
            /* 粉色盒子向前移动17.5px，此时父盒子中心轴距离每个面都相同 */
            transform: translateZ(17.5px);

        }
        .bottom {
            background-color: purple;
            /* 这个x轴一定为负值 */
            /* 我们如果有移动或者其他样式  必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>