空间转换
-
目标：使用位移、缩放、旋转等空间转换效果丰富网页呈现方式
空间位移
-
语法
-
完整写法
-
translate3d(x, y, z)
-
-
某个坐标轴位移
-
transform: translateX(值);
-
transform: translateY(值);
-
transform: translateZ(值);
-
-
-
取值（正负均可）
-
像素单位数值
-
百分比
-
透视
-
作用
-
产生近大远小，近实远虚的视觉效果
-
-
概念
-
视距：用户眼睛和屏幕的距离
-
-
写法
-
perspective: 值；
-
添加给父级
-
取值一般800-1200px之间
-
空间旋转
-
语法
-
transform: rotateZ(值);
-
transform: rotateX(值);
-
transform: rotateY(值);
-
-
左手法则
-
左手握住旋转轴，大拇指指向坐标轴正值方向， 四根手指弯曲方向为旋转正值方向
-
-
拓展
-
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
-
x，y，z 取值为0-1之间的数字
-
立体呈现
-
作用
-
让子级处于真正的3D空间内
-
-
写法
-
transform-style: preserve-3d;
-
添加给父级
-
缩放
-
完整写法
-
scale3d(x, y, z)
-
-
某个坐标轴缩放
-
scaleX()
-
scaleY()
-
scaleZ()
-
动画
动画介绍
基本使用
-
定义动画
-
@keyframes{ from {} to {} }
-
@keyframes{ 0% {} 20% {} 50% {} 100% {} }
-
-
使用动画
-
animation: 动画名称 动画时长;
-
animation属性
-
复合属性
-
写法
-
animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
-
-
注意事项
-
取值不分先后顺序
-
必须赋值项：动画名称和动画时长
-
若出现2个时间：第一个时间为动画时长， 第二个时间为延迟时间
-
-
-
拆分写法（了解）
-
animation-name：动画名称
-
animation-duration：动画时长
-
animation-delay：延迟时间
-
animation-fill-mode：动画执行完毕时状态
-
forwards：最后一帧状态
-
backwards：第一帧状态（默认值）
-
-
animation-timing-function：速度曲线
-
steps(数字) : 逐帧动画
-
-
animation-iteration-count：重复次数
-
infinite：无限循环
-
-
animation-direction：动画方向
-
alternate：反向
-
-
animation-play-state：动画播放状态
-
paused：暂停
-
通常配合:hover使用
-
-
逐帧动画
-
作用
-
精灵动画
-
搭配精灵图使用
-
-
核心
-
动画速度曲线为steps(N)
-
N与精灵图小图个数相同
-
多组动画
-
作用：一个元素添加多个动画效果
-
写法
-
animation: 动画1，动画2，动画N；
-
-