-
空间转换
1.空间位移
定义:在平面位移的基础上加上Z轴构成空间位移，空间转换也叫3D转换。
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
正方向规定:X轴向右为正方向
Y轴向下为正方向
Z轴正方向为屏幕到人的眼睛的方向
语法:transform: translate3d(x, y, z);-----连写
transform: translateX(值);-----------单独控制
transform: translateY(值);
transform: translateZ(值);
取值：像素单位数值、百分比(正负均可,正负代表向正方向或者反方向移动)
2.透视效果
默认情况下，无法观察到Z轴位移效果
原因:Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果。
解决方法:使用perspective属性实现透视效果
属性（添加给父级,子盒子使用Z轴位移时要设置给父元素）:
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200。
作用:空间转换时，为元素添加近大远小、近实远虚的视觉效果。
perspective属性是透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
视距的理解：其实就是在取值的地方安排了一只眼睛去看这个屏幕而已
3.空间旋转-Z轴
语法:transform: rotateZ(值);
取值:数字+deg(正负均可)
效果:绕Z轴旋转(正为顺时针,负为逆时针)
4.空间旋转-X轴
语法:transform: rotateX(值);
取值:数字+deg(正负均可)
效果:绕X轴旋转(正为顺时针,负为逆时针)
5.空间旋转-Y轴
语法:transform: rotateY(值);
取值:数字+deg(正负均可)
效果:绕Y轴旋转(正为顺时针,负为逆时针)
6.多条对称轴旋转
多条对称轴旋转需要连写,不然写在前面的属性会被后面的覆盖,属性值与属性值以空格隔开
语法:
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
7.立体呈现
使用perspective透视属性不能呈现立体图形
原因:perspective只增加近大远小、近实远虚的视觉效果。
解决方法:添加 transform-style: preserve-3d; 使子元素处于真正的3d空间
注意: transform-style: preserve-3d; 也是写给父元素,和perspective一样。
使用transform-style: preserve-3d呈现立体图形步骤:
①盒子父元素添加transform-style: preserve-3d；
②按需求设置子盒子的位置（位移或旋转）
注意:空间内，转换元素都有自已独立的坐标轴，互不干扰
-
动画
1.动画实现步骤
①定义动画:
语法:@keyframes +动画名称
方式一:
方式二:
②使用动画:
使用动画注意点：
动画的名称可以自定义,但不能重复,也不能为 running,它是关键词
可参与过渡的css属性都可以参与动画
如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写
提醒:
过渡和动画的区别
过渡效果：可以实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
了解:
动画本质:快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
2.animation复合属性
语法:
animation: move 2s steps(4) alternate forwards;
注意点: 一个盒子要调用两种动画时,animation要写在一起,不然会被覆盖,写的时候两个动画之间用逗号隔开
animation: run 1s steps(12) infinite, translate 3s linear forwards;
animation属性:
动画名称:自定义名称
动画时长:定义动画执行开始到结束的时间
延迟时间：动画开始执行之前要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease(先慢再快最后慢)； 常用两个:① linear 匀速播放 ② steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
暂停动画：一般配合hover使用，谁在调用动画，就给谁设置:hover 去暂停动画，效果是鼠标悬停时，暂停动画
注意点：
① 动画名称和播放一次动画的时长必须写，其他属性需要就写
② forwards不能和infinite结合使用，否则不生效
③ animation 里面属性值 不分先后顺序
④ 当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
两种动画:
①补间动画：动画执行过程中，没有间隔，非常的平滑
使用的速度曲线：默认值为ease； linear匀速的
②逐帧动画：一步一步去执行的动画，中间会有间隔
使用的速度曲线：steps(正整数)
逐帧动画又叫精灵动画，逐帧动画常常配合精灵图去使用
-
补充
1.单词汇总
2.每日一句鼓励自己的话：
不论你在什么时候开始,重要的是开始之后就不要停止
