CSS3制作旋转导航

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

慕课网学习CSS3时，遇到个习题，觉得有必要总结学习下：CSS3制作旋转导航

慕课网习题地址：http://www.imooc.com/code/1883

示例及源码地址：http://codepen.io/airen/pen/icFba

老师的源代码内容太多，太复杂，也没有逻辑讲解，所以我就从头捡重点，一边写，一边分析，并且去掉了兼容性，这样看起来简单，所以下面的代码都是在谷歌浏览器才可以适用的，尤其是CSS3部分！先看目标效果图：

总结下要点：

1、特殊的字体样式

2、在鼠标移入时，

1）改变了背景色

2）出现了3D旋转

3）出现了下边框

3、这个情况

我觉得这里的核心应该是3D旋转，所以我的思路是：

1、在鼠标滑过时

1）实现单个 li 的3D旋转

2）实现单个 li 下边框

3）实现单个 li 背景颜色改变

2、考虑全局布局

3、考虑 Blog 下的特殊情况

那么好，思路有了，咱么来考虑这个单个 li 的3D旋转，不过在这之前先把静态页面写好（自己写哦，可以参考老师的嘛），，做个小的 li ，代码如下：

body:

css:

* {
padding: 0;
margin: 0;
}
body {
padding: 20px;
}
.nav-menu {
background-color: #74adaa;
width: 950px;
height: 50px;
margin: 0 auto;
}
.three-d-box {
display: inline-block;
position: relative;
padding: 0 20px;
list-style-type: none;
}
.three-d-box a {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
font-size: 25px;
color: white;
text-decoration: none;
background-color: #74adaa;
}
.three-d-box .cont {
color: #74adaa;
}
.three-d-box .front,
.three-d-box .back {
position: absolute;
left: 0;
top: 0;
border-right: 1px solid #94c0be;
}

这个大家问题应该不大，看看老师源码应该能明白，这只是静态页面！

这里可能需要解释下，为什么要用3个 a 标签，

因为，这里至少要有两个 a ，用来翻转实现 3D 旋转，一前一后（front , back）,这个大家应该明白，所以有了两个 a 标签，但是静态页面上，我们只看到一个，结合旋转效果可以发现，这里的多个 a 标签肯定是在同一个位置的，而且是重合的，所以这里在静态页面上实现，就要给 a 标签 absolute 一下，然后 left & top 肯定为 0；但是这样的话，会出错，因为 li 的内容不一定，导航条可长可短，所以每个 li 的长度应该是自适应内容的，所以宽度不能设置，而 li 里面的 a 又是 absolute ，所以这里 li 与 li 之间就会有各种问题，我不知道你是什么问题，我是这样的，当然一开始也有其他样式的，十分奇怪，

所以最后就想了办法，再加一个内容一模一样的 a 标签，className 为 cont ,解决了上述问题，所以你也看到 front 和 back 都做了 absolute 定位和 cont 重合，但是 cont 没有 absolute ，为的是根据导航 li 的长度自适应宽度，好，静态页面完成，看旋转！

1、在鼠标滑过时

1）实现单个 li 的3D旋转

首先要搞明白，这个3D旋转是怎么实现的，把老师的源码旋转速度降到 3秒之后，我看了好些遍，终于明白了，原理是这样：上图！

一开始是这样，也就是静态页面，.front & .back 通过定位实现重合：

放到坐标系就是这样，你看到的就是XY对应浏览器宽高这一面；

然后，要实现旋转效果需要把静态页面做成这样，当鼠标滑过时，让 .front 和 .back 这个整体（也就是包裹他两的父元素）顺时针翻转90度（transform: rotateX(90deg)），这样，眼睛会看到 front 从正前方翻过去，. back 从下方翻上来 ; 滑出时，回到原位（即逆时针翻转90度） ;这样就实现了3d 旋转动画！！！听不懂？看图！

静态页面要做成这样：(请忽略此处O)

鼠标滑过，包裹他俩的父元素，顺时针翻转90度 ,翻到这样：(请忽略此处O)

能明白么？不明白好好想想~~~；或者看看下图：

3D 旋转的时候，其实是在旋转 .front 和 .back 的父元素（即 li ）：这个时候，li 的中心点应该在L处，所以上述的变化，就是把这半个长方体，以 L 为原点，立体顺时针旋转 90 度。再想想~~

从这样：(请忽略此处O)

翻成这样：

所以，我们的主要任务就是要把静态页面做好，然后把 li transform:rotateX(90deg) 就好了，难点在静态页面！当然还有这个思路！

放在坐标轴里，我们要把静态页面改成这样就可以了：(请忽略此处O)

然而我们之前做的页面把 .front 和 .back 是放在这里的，如下图：

两张图一看，大家有思路了嘛？

说之前，先确定这里元素的原点：

注意，原点是居于元素X轴和Y轴的50%处，即O点，CSS变形进行的旋转、位移、缩放，扭曲等操作都是在原点O的基础上进行的；所以我们要在此基础上，完成上面两张图的转换，对，这是在 3d 动态

旋转变换之前就要做好的；这里的O点既是 .front 和 .back的原点，也是他们的父元素 li 的原点。

然后我们的思路就是：

先把 .back 绕X轴 逆时针旋转90度：transform: rotateX(-90deg)

然后.back 沿着自身的Z轴（因为之前已经翻转过一次了，所以现在 .back 的Z轴在图中就是Y轴(我猜的！！！)）下移25px , transform: rotateX(-90deg) translateZ(25px);就是这样：

最后再把 .front 向用户正对面移动 25px 就可以了，即 transform: rotateX(0deg) translateZ(25px);

此时看看 .front 和 .back 的父元素（li）的原点 L，还在原位置，但是 .front 和 .back都移到位了，而 L 正好在这个半长方体中间，所以，把 li 沿着X轴顺时针翻转90度，就是我们要的 3D 旋转！

上述代码放一起就这些：

.three-d-box .front {
height: 49px;
}
.three-d-box .front {
-webkit-transform: rotateX(0deg) translateZ(25px);
border-bottom: 1px solid #94c0be;
}
.three-d-box .back {
-webkit-transform: rotateX(-90deg) translateZ(25px) ;
/* 面对浏览器，translateX(5px)往右5px，translateY(5px)往下5px，translateZ(5px)正对用户5px */
}
/* 准备翻转three-d-box
鼠标滑过时 */
.three-d-box:hover {
-webkit-transform: rotateX(90deg);
}
/* 规定动画效果是3D和动画时间 */
.three-d-box {
-webkit-transform-style: preserve-3d;
-webkit-transition: all 4s ease;
}

好了，核心3D旋转就说完了~~~接着看思路：

1、在鼠标滑过时

1）实现单个 li 的3D旋转（已实现）

2）实现单个 li 下边框（已实现）
3）实现单个 li 背景颜色改变（未实现）

那么好，我们来改变 li 的背景颜色，感觉这个很简单，摆代码之前发现这个小问题，我们的 li 中间有个外边距，效果图没有，那么好，我们把父层 li 的margin 改下；

就加个margin-right: -7px; 其他的没动，这下就好了；

.three-d-box {
display: inline-block;
position: relative;
padding: 0 20px;
list-style-type: none;
margin-right: -7px;
}

改鼠标移入时背景颜色：

.three-d-box:hover .front,
.three-d-box:hover .back {
background-color: #51938f;
background-image: -webkit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
-webkit-background-size: 5px 5px;
}

这个地方看不懂呢，可以三条样式一个个放，先放第一个，再放第二个，再放第三个，就很清楚了，其实就是，先加背景色，然后加背景图片，因为背景图片太大了，把背景图片尺寸变小；

至于默认的 HOME 的样式，就给 HOME li 加个className 就好了,比方加个 active , 样式里也加下，就变成这样：

.three-d-box:hover .front,
.three-d-box:hover .back,
.active .front,
.active .back {
background-color: #51938f;
background-image: -webkit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
-webkit-background-size: 5px 5px;
}

className 也要加哦：

好了，这下进行第二步：

1、在鼠标滑过时（已实现）

1）实现单个 li 的3D旋转（已实现）

2）实现单个 li 下边框（已实现）

3）实现单个 li 背景颜色改变（已实现）

2、考虑全局布局（未实现）

把第一个做好的 li 复制几个就好了，注意去掉 active ,复制好了，可能会这样:

那么就把字体调小点就可以了，我是改成了 24px ，当然你也可以把 ul 改长点；

那么好，现在就进行第三步了：

1、在鼠标滑过时（已实现）

1）实现单个 li 的3D旋转（已实现）

2）实现单个 li 下边框（已实现）

3）实现单个 li 背景颜色改变（已实现）

2、考虑全局布局（已实现）

3、考虑 Blog 下的特殊情况（未实现）

当我们在 Blog 下放上明细的代码时，其实也就是这样，
<li class="three-d-box">
<a href="#" class="cont">Blog</a>
<a href="#" class="front">Blog</a>
<a href="#" class="back">Blog</a>
<ul class="dropMenu">
<li class="three-d-box">
<a href="#" class="cont">Html5</a>
<a href="#" class="front">Html5</a>
<a href="#" class="back">Html5</a>
</li>
<li class="three-d-box">
<a href="#" class="cont">Css3</a>
<a href="#" class="front">Css3</a>
<a href="#" class="back">Css3</a>
</li>
<li class="three-d-box">
<a href="#" class="cont">Javascript</a>
<a href="#" class="front">Javascript</a>
<a href="#" class="back">Javascript</a>
</li>
</ul>
</li>
然后调整下格式：

.dropMenu {
position: absolute;
left: 0;
}
.dropMenu .three-d-box {
width: 100%;
}

结果就发现这样了：

然后当我们鼠标移上时，就这样：

我们看效果图：下拉菜单和 Blog 应该在两个元素内部，所以 Blog 的父元素 3D 翻转时，下拉菜单的父元素并没有翻转，而是变长显示了出来，所以这个时候，应该是横向导航里 li 里面有两个元

素，一个包裹了 Blog ,包括里面的三个 a, 一个包裹了下拉菜单 ul 及其内容。

原来的结构：

<li class="three-d-box">
<a href="#" class="cont">Blog</a>
<a href="#" class="front">Blog</a>
<a href="#" class="back">Blog</a>
<ul class="dropMenu">
<li class="three-d-box">
<a href="#" class="cont">Html5</a>
<a href="#" class="front">Html5</a>
<a href="#" class="back">Html5</a>
</li>
<li class="three-d-box">
<a href="#" class="cont">Css3</a>
<a href="#" class="front">Css3</a>
<a href="#" class="back">Css3</a>
</li>
<li class="three-d-box">
<a href="#" class="cont">Javascript</a>
<a href="#" class="front">Javascript</a>
<a href="#" class="back">Javascript</a>
</li>
</ul>
</li>

为了方便起见，现在我们给这个 li 改下结构，把 Blog 和下拉菜单分别包裹在不同的元素内：

<li>
<a href="#" class="three-d-box">
Blog
Blog
Blog
</a>
<ul class="dropMenu">
<li>
<a href="#" class="three-d-box">
Html5
Html5
Html5
</a>
</li>
<li>
<a href="#" class="three-d-box">
Css3
Css3
Css3
</a>
</li>
<li>
<a href="#" class="three-d-box">
Javascript
Javascript
Javascript
</a>
</li>
</ul>
</li>

能明白么？现在咱们把所有代码和样式都改下：

body:

<body>
<ul class="navMenu">
<li>
<a href="#" class="three-d-box active">
Home
Home
Home
</a>
</li>
<li>
<a href="#" class="three-d-box">
Service
Service
Service
</a>
</li>
<li>
<a href="#" class="three-d-box">
Products
Products
Products
</a>
</li>
<li>
<a href="#" class="three-d-box">
About
About
About
</a>
</li>
<li>
<a href="#" class="three-d-box">
Contact
Contact
Contact
</a>
</li>
<li>
<a href="#" class="three-d-box">
Blog
Blog
Blog
</a>
<ul class="dropMenu">
<li>
<a href="#" class="three-d-box">
Html5
Html5
Html5
</a>
</li>
<li>
<a href="#" class="three-d-box">
Css3
Css3
Css3
</a>
</li>
<li>
<a href="#" class="three-d-box">
Javascript
Javascript
Javascript
</a>
</li>
<li>
<a href="#" class="three-d-box">
Videogames
Videogamess
Videogamess
</a>
</li>
</ul>
</li>
<li>
<a href="#" class="three-d-box">
Shop On-Line
Shop On-Line
Shop On-Line
</a>
</li>
</ul>
</body>