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

1.整体效果

2.实现方案

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

2.1.基础框架编写

小懒首先通过 html:5 快速创建 html5 页面基础框架，然后通过 schema div[class=container]>ul[class=navlist]>(li>a[href=#])*5 快速创建导航 html 框架。同时给基础框架增加了基础样式，样式中我们使用了现代 CSS 的一些特性，比如 CSS 元素嵌套（插入链接）、CSS 自定义属性等新的特性。

<style>
  :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;
    }
  }
}

2. 对顶面的伪元素设置层级

&::after {
  z-index: -1;
}

3. 给各面定义动画

& 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 来实现。