2. 3D转换
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向（垂直于屏幕指向你自己是正方向）。
2.1 3D移动 translate3d
<style>
transform: translateX();
transform: translateY();
transform: translateZ();
transform: translate3d(x, y, z);
</style>
2.2 透视 perspective
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 透视我们也成为视距：就是人的眼睛到屏幕的距离。透视是模拟一个人眼去看。
- 距离视觉点跃进的在电脑平面成像越大，越远则成像越小
- 透视的单位是像素（px）
- 透视写在被观察元素的父级元素上面
2.3 3D旋转 rotate
<style>
transform: rotateX('angle');
transform: rotateY('angle');
transform: rotateZ('angle');
transform: rotate3d(x, y, z, deg);
</style>
- 可以增加perspective来增加立体感
- 方向：利用左手法则，四指所指方向就是正方向
- transform: rotate3d(x, y, z, deg); 是围绕三个x， y， z的矢量和方向旋转deg度
2.4 3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transfolm-style:flat; 子元素不开启3D立体空间 （默认值）
- transfolm-style:preserve-3d; 子元素开启3D立体空间
- 代码写给父级元素，但是影响过的是子盒子
- 如果不开启3D立体空间，就算是通过3D转换得到了类似于3D的效果，也是由2D图像变化显示出来的伪3D效果
十九、动画 animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确的控制一个或一组动画，长用来实现复杂的动画效果。
相比较过度，动画可以实现更多的变化，更多控制，连续播放等效果。
1.动画的使用
-
先定义动画
用keyframes（关键帧）定义动画
@keyframes 动画名称{ 0% { } 50% { } 100% { } } -
再调用动画
用 animation-name： 调用动画，再用 animation-duration： 来设置持续时间
animation（动画）
2.动画常用属性
- lanimation-timing-function: 还有linear等等好多曲线，linear是匀速
- animation-play-state: pause; 的意思是当鼠标放上去就暂停；
- animation-fill-mode: forwords; 的意思是动画结束后保持现在的位置；
3.速度曲线
animation-timing-function: ;规定动画的速度曲线，默认是“ease”
steps(n)，将动画平均分成n步，逐步进行
4.复合写法
<style>
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
//动画名称和持续时间是必须的
</style>
二十、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
1.私有前缀
- -moz- : 代表Firefox浏览器私有属性
- -ms- : 代表ie浏览器私有属性
- -webkit- : 代表safari、chrome浏览器私有属性
- -0- : 代表Opera浏览器私有属性
2.提倡的写法
<style>
div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
</style>
