NAV标题切换目录
块级元素：
在网页中以块的形式显示，默认情况都会占据一行，两个相邻的块级元素不会出现并列显示的元素，按照顺序自上而下排列。
行内元素：
在网页中始终以行内逐个显示，没有自己的形状并且不能定义自己的宽和高，他显示的宽和高根据所包含内容的宽和高确定。
内联元素也会遵循盒模模型基本法则，如定义padding，border，margin，background等属性，但是个别属性不能正确显示。
可变元素：
根据上下文确定该元素是块元素还是内联元素
CSS的3D动画
3D
在2d的基础上添加 z 轴的变化 3D 位移：
在2d的基础上添加 translateZ（），或者使用translate3d（）
translateZ（）：以方框中心为原点，变大 3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（）
scaleZ（）和 scale3d（）函数单独使用时没有任何效果 3D 透视：perspective 规定3D元素的透视效果
可以取值为none或不设置，这种情况下说明没有透视效果
取值越小，3d效果越明显
3D背面可见：backface-visibility 定义元素在不面对屏幕时是否可见
transform-style：规定被嵌套元素在3D空间中显示
transform-style：flat； 子元素将不保留其 3d位置
transform-style：preserve-3d； 子元素将保留其3d位置
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
css中通过 @keyframes规则是创建动画，可以改变任意多的样式任意多的次数。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
语法：@keyframes
styleName {
keyframes-selector{css-style;}
}
keyframes-selector：可以用百分比来规定变化发生的时间
也可以用关键词 "from" 和 "to"
0% 是动画的开始，100% 是动画的完成
效果图
废话不都说，具体代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>nav和3D效果图</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav {
height: 60px;
min-width: 960px;
background: #2196f3;
}
.nav ul {
width: 960px;
margin: 0 auto;
text-decoration: none;
overflow: hidden;
}
.nav ul li {
float: left;
border-right: 1px #fff solid;
}
.nav ul li a {
display: block;
width: 119px;
height: 60px;
color: #fff;
text-align: center;
line-height: 60px;
text-decoration: none;
font-size: 18px;
}
.nav ul li a:hover {
background: #0011ff;
}
.nav ul li.active {
background: #ff9800;
font-weight: bold;
}
.nav ul li:last-child {
border-right: none;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
perspective: 800px;
cursor: pointer;
}
.box ul {
list-style: none;
width: 200px;
height: 200px;
transition: all 2s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
}
.box ul li {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
font-size: 36px;
color: #fff;
}
.box ul li:nth-child(1) {
background: rgba(30, 255, 0, 0.5);
transform: translateY(-100px) rotateX(90deg);
}
.box ul li:nth-child(2) {
background: rgba(255, 188, 45, 0.5);
transform: translateY(100px) rotateX(-90deg);
}
.box ul li:nth-child(3) {
background: rgba(68, 233, 255, 0.5);
transform: translateX(-100px) rotateY(-90deg);
}
.box ul li:nth-child(4) {
background: rgba(255, 61, 61, 0.5);
transform: translateX(100px) rotateY(90deg);
}
.box ul li:nth-child(5) {
background: rgba(126, 12, 255, 0.5);
transform: translateZ(100px);
}
.box ul li:nth-child(6) {
background: rgba(170, 19, 120, 0.5);
transform: translateZ(-100px) rotateY(180deg);
}
.box ul:hover {
transform: rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<div class="nav">
<ul type="none" id="nav">
<li class="active"><a href="#">博客首页</a></li>
<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>
<li><a href="#">后台管理</a></li>
</ul>
</div>
<div class="box">
<ul>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
<li>前</li>
<li>后</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function () {
var $coupon_tab = $("#nav>li");
var index = 0;
$coupon_tab.click(function () {
// 移除tab中class的active属性
$($coupon_tab[index]).removeClass('active');
index = $(this).index();
// 添加tab中class的active属性
$(this).addClass('active');
});
});
</script>
</body>
</html>