前端小案例之3D导航栏一、案例介绍？二、案例代码总结

86 阅读 0 评论 57 点赞

我是靠谱客的博主忐忑大米，最近开发中收集的这篇文章主要介绍前端小案例之3D导航栏一、案例介绍？二、案例代码总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简单3D导航栏案例-鼠标经过盒子时底部盒子旋转

最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家。

文章目录

- 简单3D导航栏案例-鼠标经过盒子时底部盒子旋转
一、案例介绍？
二、案例代码
- 1.HTML结构
- 2.CSS样式
总结

一、案例介绍？

效果如下:
在这里插入图片描述

该案例主要是在一个navbar导航栏的盒子里面放几个li，每个li里面包含一个span便签和一个链接，这个span标签是初始正对着我们的，当我们用鼠标经过这个li下面的span时，就把下面的a便签也就是链接旋转上来并且可以对链接进行设置需要跳转到哪个界面。

二、案例代码

1.HTML结构

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="navbar">
        <li>
            <div class="case">
                <span class="front">首页</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面1</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面2</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面3</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面4</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面5</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面6</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面7</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面8</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面9</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面10</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面11</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front">子页面12</span>
                <a href="#" class="bottom">进入</a>
            </div>
        </li>
    </ul>
</body>

</html>

2.CSS样式

代码如下：

/* 清除内外边距 */
* {
    margin: 0;
    padding: 0;
}

.navbar {
    width: 1200px;
    height: 34px;
    margin: 100px auto;
    border: 1px solid rgba(0, 0, 0, .3);
    /* 边框设置 */
    border-radius: 10px;
}

.navbar li {
    float: left;
    margin: 0 5px;
    width: 80px;
    height: 34px;
    font-size: 13px;
    list-style: none;
    /* 让li下面的子盒子都有透视效果 */
    perspective: 600px;
}

.navbar li a {
    /* 去除进入链接下面的下划线 */
    text-decoration: none;
}

.case {
    position: relative;
    width: 100%;
    height: 100%;
    /* 使得子盒子上的文字都居中显示 */
    text-align: center;
    line-height: 34px;
    /* 由于子级元素设置了3D效果，如果父级这里不加这个属性的话子级的3D效果就不会显示出来 */
    transform-style: preserve-3d;
    /* 加一个旋转的过渡效果 */
    transition: all .6s;
}

.case:hover {
    /* 经过盒子则旋转90度显示下方的盒子 */
    transform: rotateX(90deg);
}

.front,
.bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.front {
    /* z-index 属性指定一个元素的堆叠顺序，让需要初始显示的盒子堆叠顺序更高。 */
    z-index: 1;
    /* 往我们的面前移动所以是正的并且移动盒子高度的一半使得可以绕着中心点旋转 */
    transform: translateZ(17px);
    color: #666;
}

.bottom {
    /* 往前倒必须是负值因为旋转上去底部的盒子字体要是正对我们的 */
    /* 往下走高度的一半 */
    /* 如果有移动或者其他的样式必须先写我们的移动 */
    transform: translateY(17.5px) rotateX(-90deg);
    color: orange;
}