这么炫酷的 3D Menu 效果，真的不来看看？

我正在参加「码上挑战赛」概略请看：码上挑战赛来了！

最近在研究 CSS3 中关于 3D 方面的特色，越发的觉得 CSS3 是真的好玩，尽管目前首要的作业是 2B 的事务，可是却并不妨碍我有一颗 2C 的心，刚好最近学到了一个比较炫酷的 3D 菜单事例，今天咱们就一起来好好把玩一下，废话不多说，咱们开整！

CSS3 – 3D Menu

首要咱们先来看一下一般的 Menu 是什么样的，然后再来对比一下咱们即将要盘的 3D Menu 是什么样的，先来看两张图，如下：

就拿来举例，图中画出来的就是 Menu ，也就是网站的菜单，大部分网站的菜单跟都是差不多的，下面咱们在一起来看一下 3D 的菜单是什么样的，如图：

通过两张图片可以明显的看出，3D Menu 与一般 Menu 的展示和交互彻底不同，下面咱们就来一步步解刨一下这个效果。

基础树立

要完结上述的 3D 效果，咱们需求先来树立一下相关的 HTML，其实也很简略，代码如下：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Price</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Contact</a></li>
</ul>

页面中只需求通过 ul、li、a 等标签即可树立基础的架子，有了基础的标签，咱们需求先来初始化一下相关的样式，因为每个浏览器在不同的标签上都会添加一些默许的样式，因此咱们需求将这些默许的样式都去掉，这儿我运用的是 less，通过编译后，毕竟仍是会转换为 css。咱们先来看一下初始化的样式，如下：

* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    font-size: sans-serif;
}

在初始化的时分，通过 * 这个通配符找到页面中全部的标签，但实践上这样是不太好的方法，这儿仅仅图个简洁，所以运用通配符来挑选全部标签，实践开发中咱们会将需求的标签选取出来，然后再去除它们的默许样式。

在上述默许样式中，通过通配符挑选全部的标签后，将这些标签的 margin 和 padding 都设置为 0，因为浏览器默许有一个 8px 的边距会影响到咱们，因此这儿将默许的样式去除，然后设置全部标签的 盒模型 为 古怪盒模型，关于盒模型不了解的童靴可以到中查找一下，有许多文章进行解说，这儿就不做过多的介绍。

设置完初始样式后，咱们需求给 body 添加相关的样式，因为这儿是做这个 3D Menu 的效果，因此才需求在 body 上设置相关的样式，实践开发中就需求依据相关的需求来了，具体的代码如下：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #424345;
}

咱们在 body 中设置 display 的特色为 flex ，将 body 设置为一个盒子，然后将 body 中全部的元素都设置为上下左右居中目标，并给 body 一个最小的高度，也就是浏览器的高度，毕竟添加一个背景色。

基础的内容都准备好后，咱们要真实开始编写这个 3D Menu 相关的样式了，因为这个效果是纯 CSS 完结的，因此不规划任何的 JavaScript 代码，咱们可以放心食用。

Menu 效果

通过上面的图片咱们可以看出，这个 Menu 像一个立体的效果，其实也就解说了 3D 效果简略来说就是一个视觉差，让咱们的大脑误以为一个平面的效果是立体的。因此咱们可以通过如下代码让咱们的 Menu 先“立”起来，代码如下：

ul {
    position: relative;
    transform: skewY(-15deg);
    li {
        position: relative;
        list-style: none;
        width: 200px;
        background: #3e3f46;
        padding: 15px;
        transition: .5s;
        a {
            text-decoration: none;
            color: #ccc;
            display: block;
            text-transform: uppercase;
            letter-spacing: .05em;
            transition: .5s;
        }
    }
}

上述代码选用 less 编写，因此可以直接进行嵌套编写，假设对 less 不了解的童鞋，也可以直接运用 css 进行编写，效果是相同的，通过上述的代码，咱们可以得到如下的效果：

咱们在 ul 标签上设置了一个 transform: skewY(-15deg)，这样就让整个 ul 沿着纵坐标倾斜了 15 度，这样看起来还不像一个 3D 的效果，让咱们继续来完善一下，代码如下：

ul {
    position: relative;
    transform: skewY(-15deg);
    li {
        // ... other code
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -40px;
            width: 40px;
            height: 100%;
            background: #35383e;
            transform-origin: right;
            transform: skewY(45deg);
            transition: .5s;
        }
        &::after {
            content: '';
            position: absolute;
            top: -40px;
            left: 0;
            width: 100%;
            height: 40px;
            background: #35383e;
            transform-origin: bottom;
            transform: skewX(45deg);
            transition: .5s;
        }
        // ... other code
    }
}

在上述代码中，咱们通过给 li 标签的 before 和 after 伪类添加相关的特色，其间最首要的是需求设置伪类元素的旋转点，也就是上述代码中的 transform-origin，在 before 伪类中，咱们设置其时伪类的旋转点是右边，因此这个伪类元素会向左面倾斜负 45 度；而在 after 伪类中，设置的旋转点是底部，因此这个伪类的就是向上倾斜 45 度，毕竟的效果如下图所示：

这儿还有一个点需求注意一下，因为咱们给每个 li 设置了一个背景色，而 before 和 after 伪类中也添加了相关的背景色，而且通过定位来将它们的方位指定到 li 的左面和顶部，然后让咱们看到这个 Menu “立”起来了。咱们都知道定位的元素是有层级的，也就是 z-index，因此咱们需求设置每一个 li 的 z-index，那么咱们该怎么设置呢？

最蠢的方法莫过于给每个 li 都添加一个 z-index，可是这种方法关于代码的保护和整齐度都极点不友好，因此咱们有一种更简略的方法，咱们可以给每个 li 标签添加一个 style 特色，里边的值也很简略，咱们先来改造一下 html，代码如下：

<ul>
    <li style="--i:6;"><a href="#">Home</a></li>
    <li style="--i:5;"><a href="#">About</a></li>
    <li style="--i:4;"><a href="#">Services</a></li>
    <li style="--i:3;"><a href="#">Price</a></li>
    <li style="--i:2;"><a href="#">Our Team</a></li>
    <li style="--i:1;"><a href="#">Contact</a></li>
</ul>

咱们给每个 li 的 style 中都添加一个 --i:n 这样的特色，然后合作相关的样式就能自动的设置 li 的层级了，具体的样式批改如下：

li {
    position: relative;
    list-style: none;
    width: 200px;
    background: #3e3f46;
    padding: 15px;
    z-index: var(--i);
    transition: .5s;
}

只需求在 li 的样式中添加一行 z-index: var(--i);，整个 li 的层级就会自动依据 style 中设置的 –i:n; 来进行改动，那么这个 var() 到底是个什么东西呢？咱们可以看一下 MDN 的介绍：

var() 函数可以代替元素中任何特色中的值的任何部分。var() 函数不能作为特色名、挑选器或许其他除了特色值之外的值。（这样做通常会产生无效的语法或许一个没有相关到变量的值。）

具体的概略可以点击这儿进行检查。

简略来说，var() 可以代替咱们设置的任何值，将咱们设置的特色转换为咱们需求的值。

现在 3D 的姿态现已有了，可是鼠标移入 li 还不能动起来，咱们还需求添加相关的 hover 效果，代码如下：

ul {
    position: relative;
    transform: skewY(-15deg);
    li {
        // ... other code
        &:hover {
            background: #33a3ee;
            transform: translateX(50px);
            &::before {
                background: #2982b9;
            }
            &::after {
                background: #1f5378;
            }
        }
        a {
            text-decoration: none;
            color: #ccc;
            display: block;
            text-transform: uppercase;
            letter-spacing: .05em;
            transition: .5s;
            &:hover {
                    color: #fff;
            }
        }
        &:last-child {
            &::after {
                box-shadow: -100px 100px 20px rgba(0, 0, 0, .25);
            }
        }
    }
}

通过给 li 添加 hover 效果，改动 li 的位移，让整个 Menu 看起来像一个立体的 3D 效果，毕竟的代码完结可以在这儿进行检查：

毕竟

CSS3 中的特色还有许多，通过对 CSS3 的学习和摸索，咱们还能完结更多有意思的效果。看到这儿，是否现已勾起你对 CSS3 学习的欲望呢？假设你也喜欢这些炫酷的效果，那就快来跟我一起学习吧！

毕竟，假设这篇文章有协助到你，❤️重视+点赞❤️鼓动一下作者，谢谢咱们

往期回想

『 CSS实战』CSS3 完结一些好玩的效果(6)

『 CSS实战』CSS3 完结一些好玩的效果(5)

『 CSS实战』CSS3 完结一些好玩的效果(4)

『 CSS实战』CSS3 完结一些好玩的效果(3)

『 CSS实战』CSS3 完结一些好玩的效果(2)

『 CSS实战』CSS3 完结一些好玩的效果(1)