移动web第二天重难点知识点回忆

一、3d动画

这一板块考验你作为一个初学者的非专业能力，看你有没有较强的3d空间想象能力，能否在自己的脑海中构建一个3d模块，其次才是知识点的学习。

1、3d位移

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

2、3d旋转

左手法则：

 ①、 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向
 ②、 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向

3、3d缩放

transform: scaleZ(20) 小括号里边的数字以1为界，大于一是放大；小于一是缩小。

4、透视

①、取值范围经常在 800px ~  1200px 之间。
②、一定给**父亲**添加
③、透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
   - 其中 d 为透视的距离
   - z 是 `translateZ` 的距离， 这个距离靠近我们，盒子越大

二、动画

动画最大的特点：可以不用鼠标触发，自动的，反复的执行某些动画。

属性：

①、动画名字参照css类选择器命名
②、动画时长和延迟时间别忘了带单位 s 
③、**infinate**   无限循环动画（重复次数）
④、**alternate**  为反向 就是左右来回执行动画（跑马灯）
⑤、**forwards**  动画结束停留在最后一帧状态， 不循环状态使用
⑥、**linear**   让动画匀速执行