一步一步来制作3D导航栏

• 目标效果如下
  
• 页面结构

<nav class="nav">
  <a href="#"><span data-hover="Ratatouille">Ratatouille</span></a>
  <a href="#"><span data-hover="Lassitude">Lassitude</span></a>
  <a href="#"><span data-hover="Murmurous">Murmurous</span></a>
  <a href="#"><span data-hover="Palimpsest">Palimpsest</span></a>
  <a href="#"><span data-hover="Assemblage">Assemblage</span></a>
</nav>

• 设置一下 nav 的内边距，背景色，文字水平居中。

.nav {
  background: #0e83cd;
  padding: 10em 3em;
  text-align: center;
}

• 注意可以按 tab 键，是 a 链接处于 focus 状态，会出现一个难看的边框，可以设置 outline: none; 去除，但这样我们就无法直观的知道哪个 a 被 focus 了，后面会设置 focus 翻转效果。
  

• 接下来继续修改 a 链接的一些默认样式（注意 a 默认 display: inline; 需要添加上下 margin 或宽高或行高的话，需要设置成块级元素），并设置视图视点。

.nav a {
  text-decoration: none;
  outline: none;
  color: white;
  display: inline-block;
  margin: 15px 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.35em;
  line-height: 44px;
  text-shadow: 0 0 1px rgba(255,255,255,.3);
  perspective: 1000px;
}

• 旋转展示的话知道要用到两个面儿，利用常用的伪元素定位。给 span 占满 a 的内容，3D 视图，过度效果等。

.nav a span {
   display: inline-block;
   padding: 0 14px;
   background: #2195de;
   position: relative;
   transition: transform .3s;
   transform-style: preserve-3d;
 }
.nav a span::after {
  content: attr(data-hover);
  background: #0965a0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

• 有兴趣的朋友，可以试下给 span 加上下 padding ，看看 top: 100%; 计算后的值是多少，可以发现绝对定位上相对于父级定位元素的内边框或外内边距框定位的。还有去除伪元素的 position: absolute; 值，伪元素从 block 变成了 inline，而设置成 relative 却不会，这是因为绝对定位会产生块级上下文。
• 接下来我们要实现，伪元素以上边为轴旋转 -90deg ，这样就形成了一个立方体的前面和下面，之后再以前面的上边轴旋转 90deg，下面就变前面了。
• 伪元素直接旋转 -90deg效果：

.nav a span::after {
    ...
    transform: rotateX(-90deg);
}

• 别忘了修改 span 和伪元素的旋转中心点。

.nav a span {
    ...
    transform-origin: 50% 0;
}
.nav a span::after {
    ...
    transform-origin: 50% 0;
}

• 设置 a 链接悬浮，聚焦是的翻转效果

.nav a:hover span,
.nav a:focus span {
  transform: rotateX(90deg);
}

• 最后设置悬浮或聚焦时 span 伪类的由暗变明，落下去由暗变明效果的立体真实效果，效果如顶文。

.nav a:hover span::after ,
.nav a:focus span::after {
  background: #28a2ee;
}

• 细心的同学，应该发现旋转的时候，下面变前面，应该 Z 轴是有变化的，这是由于视图视点设置很大，变动了 22px 不明显，如果改动视图视点为 100px 的话效果就明显了。

.nav a {
    ...
    perspective: 100px;
}