随着当代 CSS 技能的发展，CSS 新特性被越来越多的浏览器所支持，本文紧张讲述利用纯 CSS 实现3D导航栏的步骤，并对个顶用到的关键样式做一个解析。

1.整体效果

2.实现方案

实现方案将从一个根本的样式写起，然后逐渐添加相应的伪元向来实现不同的边，实现3D效果。
与此同时，实现的过程中还给导航设置了动画，方便鼠标 hover 的时候有个更好地用户体验。

css3html5竖导航栏现代CSS纯 CSS 实现 3D 导航栏 Java
（图片来自网络侵删）
2.1.根本框架编写

小

<style&gt; :root { --color: #4855B0; } body { margin: 0; padding: 0} .container { display: flex; justify-content: center; align-items: center; padding: 20px; .navlist { list-style: none; padding: 0; & li { & a { display: block; padding: 15px 25px; background-color: var(--color); color: #fff; text-decoration: none; &:hover { --color: #f00; left: -20px; } } } } }</style><!--div[class=container]>ul[class=navlist]>(li>a[href=#])5--><div class="container"> <ul class="navlist"> <li><a href="#">首页</a></li> <li><a href="#">用户管理</a></li> <li><a href="#">菜单管理</a></li> <li><a href="#">日志管理</a></li> <li><a href="#">权限管理</a></li> </ul></div>

效果如下：

2.2.3D效果实现

为了实现 3D 效果，须要旋转对各面做倾斜变革，正面须要Y轴倾斜 -15deg，侧面须要Y轴倾斜 45deg，顶面须要X倾斜 45deg。
侧面和顶面我们利用 CSS 伪元素 ::before 和 ::after 来实现。
在CSS 实现中背景颜色我们利用 color-mix 颜色稠浊函数来自动打算背景颜色。

// 正面a { transform: skewY(-15deg);}a { &::before { position: absolute; left: -20px; bottom: 10px; width: 20px; height: 100%; content: ""; background-color: color-mix(in srgb, var(--color), black 20%); transform: skewY(45deg); transition: background-color 200ms; } &::after { position: absolute; left: -10px; top: -20px; width: 100%; height: 20px; content: ""; background-color: color-mix(in srgb, var(--color), black 20%); transform: skewX(45deg); }}

效果图如下：

从上面效果图可以看到，3D效果已经实现，但是顶面和正面的层级还是有点问题，以至于效果看着比较别扭，我们再整体调试一节中将调试细节。
请把稳：color-mix 函数虽然得到大多数当代浏览器的支持，但是在天生环境中请谨慎利用。

2.3.整体调试

1）首先对导航的各项做了层级定义：

& li { &:nth-child(1) { & a { z-index: 5; } } &:nth-child(2) { & a { z-index: 4; } } &:nth-child(3) { & a { z-index: 3; } } &:nth-child(4) { & a { z-index: 2; } } &:nth-child(5) { & a { z-index: 1; } }}对顶面的伪元素设置层级

&::after { z-index: -1;}给各面定义动画

& a { transition: left 200ms, background-color 200ms; &::before { transition: background-color 200ms; } &::after { transition: background-color 200ms; }}

4）整体实当代码

<style> :root { --color: #4855B0; } .container { display: flex; justify-content: center; align-items: center; padding-top: 150px; .navlist { list-style: none; padding: 0; transform: skewY(-15deg); & li { &:nth-child(1) { & a { z-index: 5; } } &:nth-child(2) { & a { z-index: 4; } } &:nth-child(3) { & a { z-index: 3; } } &:nth-child(4) { & a { z-index: 2; } } &:nth-child(5) { & a { z-index: 1; } } & a { position: relative; left: 0; display: block; padding: 15px 25px; background-color: var(--color); color: #fff; text-decoration: none; transition: left 200ms, background-color 200ms; &::before { position: absolute; left: -20px; bottom: 10px; width: 20px; height: 100%; content: ""; background-color: color-mix(in srgb, var(--color), black 20%); transform: skewY(45deg); transition: background-color 200ms; } &::after { position: absolute; left: -10px; top: -20px; width: 100%; height: 20px; content: ""; background-color: color-mix(in srgb, var(--color), black 20%); transform: skewX(45deg); transition: background-color 200ms; z-index: -1; } &:hover { --color: #f00; left: -20px; } } } } }</style><div class="container"> <ul class="navlist"> <li><a href="#">首页</a></li> <li><a href="#">用户管理</a></li> <li><a href="#">菜单管理</a></li> <li><a href="#">日志管理</a></li> <li><a href="#">权限管理</a></li> </ul></div>3.总结

当代 CSS 授予了当代开拓者更多的能力，之前须要利用 JavaScript 来办理的业务需求，现在可以通过纯 CSS 来实现了，这对开拓者是一大利好。
有句话能用CSS能实现的，只管即便不要用 JavaScript 来实现。