前端学习Day18

一、3D的旋转
增加了rotateZ(); 和 rotate3d(x,y,z,度数)
注：x、y、z 它们是一个矢量值，0是不旋转，1是旋转 eg:rotate3d(1,1,0,45deg) 等价于：rotateX(45deg) rotateY(45deg)
二、3D的缩放
增加了 scaleZ() 和 scale3d(x,y,z)
注：交互时需要把旋转的x,y再写一遍，否则会覆盖。
让背面不可见： backface-visibility:hidden;
三、景深：近大远小
perspective景深： 值越大距离越远 ( 给父元素添加 )
perspective:500px; 900 - 1200
景深的视角：erspective-origin:
中间：center
左上角: left top
右上角：right top
10px 10px
四、css3动画
第一步：制作关键帧
（1）方法

注：（1）方法适用于制作简单动画，加浏览器前缀时把浏览器前缀加在@后面即可。
（2）方法

注：（2）加定位的位置时，方向要一致
第二步: 调用关键帧：animation: ;复合属性
简写方式：animation: 动画的名称 动画的时间 延迟时间 动画的类型 动画循环的次数 动画运动的方向 运动的状态 动画停止的状态;
分开：
animation-name 动画的名称
animation-duration动画的时间，单位为s（秒），从开始到结束
animation-timing-function动画的类型
linear：线性过渡，匀速，用的多
ease：平滑过渡（默认值），从低速到加快再减速，用的多
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢
step-start:马上跳到动画每一结束桢的状态，用的多
animation-delay延迟时间，动画开始前延迟的时间
animation-iteration-count动画循环的次数
写数字即可，写几就循环几次
无限循环 infinite
animation-direction动画运动的方向
normal ：正常方向
reverse：反方向运行（从关键帧的最后一帧开始往前执行）
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state运动的状态
running 运动
paused 暂停
transition 和 animation的区别：
transition需要事件触发（例如：鼠标滑过）
animation：自动触发