1. 3d立体呈现案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
height: 0;
}
.box {
/* 开启3d */
transform-style: preserve-3d;
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
/* 过渡 */
transition: all 2s;
}
.box .one,
.box .two {
/* 子绝父相 */
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.one {
/* z轴向后移100px 负值 */
transform: translateZ(-100px);
background-color: yellow;
}
.two {
/* z轴向前移100px 正值，此时分开三个盒子 */
transform: translateZ(100px);
background: blue;
}
.box:hover {
/* 让大盒子垂直方向旋转180度，侧面就可以看到三个分开的盒子 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>如何制作3D导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
height: 0;
}
.nva {
width: 482px;
height: 50px;
margin: 200px auto;
}
.nva ul {
list-style: none;
}
.nva ul li {
position: relative;
float: left;
margin-right: 20px;
width: 120px;
height: 50px;
}
.nva li a {
/* 开启3d */
transform-style: preserve-3d;
text-decoration: none;
display: block;
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
transition: all 2s;
}
ul li a span {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
ul li a span:first-child {
width: 120px;
height: 50px;
background-color: green;
transform: translateZ(25px);
}
li a span:last-child {
width: 120px;
height: 50px;
background-color: orange;
/* y轴向上移动25px x轴顺时针旋转90度 */
transform: translateY(-25px) rotateX(90deg);
}
li a:hover {
/* 整个盒子x轴逆时针旋转90度 */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nva">
<ul>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
height: 0;
}
.nva {
width: 482px;
height: 50px;
margin: 0 auto;
}
.nva ul {
list-style: none;
}
.nva ul li {
position: relative;
float: left;
margin-right: 20px;
width: 120px;
height: 50px;
}
.nva li a {
/* 开启3d */
transform-style: preserve-3d;
text-decoration: none;
display: block;
width: 120px;
height: 50px;
text-align: center;
line-height: 50px;
transition: all 2s;
}
ul li a span {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
ul li a span:first-child {
width: 120px;
height: 50px;
background-color: green;
transform: translateZ(25px);
}
li a span:last-child {
width: 120px;
height: 50px;
background-color: orange;
/* y轴向上移动25px x轴顺时针旋转90度 */
transform: translateY(-25px) rotateX(90deg);
}
li a:hover {
/* 整个盒子x轴逆时针旋转90度 */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nva">
<ul>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
<li><a href="#">
<span>首页</span>
<span>index</span>
</a>
</li>
</ul>
</div>
</body>
</html>2.动画
数据在网络上是以很小的称为帧（Frame）的单位传输的，帧由几部分组成，不同的部分执行不同的功能
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
定义：
/* 1. 定义的动画 */ @keyframes dance { from { transform: scale(1) } to { transform: scale(1.5) } }或者是
/* 1. 定义的动画 */ @keyframes dance { 0% { transform: scale(1) } 100% { transform: scale(1.5) } }调用
img { width: 200px; /* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/ animation: dance .5s infinite; }
动画属性
动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向 就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态， 不循环状态使用
linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box， 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
多组动画
/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */ animation: run 1s steps(12) infinite, move 5s linear forwards;