就业班移动web第二天
一、空间转换
通过transform属性实现元素在空间内的转换，位移、旋转，缩放等效果。
空间转换即为3d
1.空间位移
语法：transform: translate3d(x, y, z);值为正负，单位：像素和百分比
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);其中z轴 就是人眼直视方向！
2.透视
通过perspective属性实现透视效果（近大远小的效果）
语法：perspective：值 （值为透视距离，视距就是人的眼睛到屏幕的距离）
取值：800-1200 单位为像素
设置给使用了3d元素的父元素（亲爸爸）
3.空间转换
通过rotate实现元素空间旋转效果
语法：transform：rotate（x, y z）值为正负，连写属性值与属性值以空格隔开，单位：deg
可通过左手法则判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
4.立体呈现
通过transform-style: preserve-3d呈现立体图形
语法：transform-style: preserve-3d （盒子父元素添加）
preserve-3d 和透视的区别
perspective属性：仅仅是增加了一个进大远小的效果，并没有真正的开启3d模式
二、动画
利用animation添加动画效果
动画效果分为补间动画和逐帧动画
animation步骤为定义动画和使用动画
a定义动画
语法：
@keyframes 动画名字 （不能用runing这个名字） {
form{需要设置效果 }或者百分比（初始状态）
to{ 需要设置效果}或者百分比（结束状态）
}
b使用动画
在需要的标签加上使用动画
animation：设置的动画名字 时间 （注意这两个必写）
一个标签需要用多个动画，用英文逗号隔开，写上名字和时间及其他属性
以下是常用的动画效果属性：
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
animation 里面属性值 不分先后顺序
