1. 空间转换（transform）
1.1 transform属性:
- 实现元素在空间内的位移(translate)
- 实现元素在空间内的旋转(rotate)
- 实现元素在空间内的缩放(scale)
1.2 空间位移(translate)
语法示范：
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）：
- 像素单位数值
- 百分比
1.3透视（perspective）
作用：
- 给元素设置3D效果的时候，无法看到Z轴设置的大小，这个时候给元素设置透视值，空间转换时，为元素添加近大远小、近实远虚的视觉效果
注意：
使用perspective时只能添加给父级元素
perspective: 值; （值的大小一般给800 – 1200px）
1.4 空间旋转（rotate）
左手法则
Ø 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
实例：
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
transform:rotate3d(1,1,1,360deg)
1.5 立体呈现(transform-style: preserve-3d)
实现方法：
- 使子元素处于真正的3d空间
使用步骤：
-
盒子父元素添加transform-style: preserve-3d；
-
按需求设置子盒子的位置（位移或旋转）
注意
Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰
3D导航栏案例：
<!DOCTYPE html>
<html lang="zh-CN">
<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;
padding: 0;
box-sizing: border-box;
}
ul {
width: 920px;
margin: 100px auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
li {
float: left;
perspective: 300px;
width: 200px;
height: 50px;
margin-right: 30px;
}
a {
position: relative;
display: block;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .5s;
}
span {
position: absolute;
top: 0;
height: 0;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
}
li a span:first-child {
background-color: orange;
transform: translateY(-25px) rotateX(90deg);
}
li a span:last-child {
background-color: blue;
transform: translateZ(25px);
}
a:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">
<span>index</span>
<span>首页</span>
</a>
</li>
</ul>
</div>
</body>
</html>
1.6 空间缩放（scale）
语法：
Ø transform: scaleX(倍数);
Ø transform: scaleY(倍数);
Ø transform: scaleZ(倍数);
Ø transform: scale3d(x, y, z);
2. 动画（animation）
2.1 添加动画效果（animation）
具体步骤：
1.定义动画：
@keyfrom 动画名字{
from{
动画开始
}
to{
动画结束
}
}
2. 使用动画：
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时候的状态
2.2 动画属性（animation：steps（数字））
可以设置帧数动画，steps（n）中输入需要的帧数
2.3 animation给一个元素设置多个动画效果
- 不能使用多个animation调用动画，不然会引起覆盖。
- 正确使用方法为：
animation:动画1，动画2，动画n;
