移动web第二天

空间转换3D，动画

transform：transform3d（x，y，z）

 perspective：1000px，视距

模拟人眼距离电脑屏幕的距离，屏幕原先是二维(x，y)，加此值变为三维(x，y，z)，使用z轴必须添加此值给父级，不添加z轴不生效，如果父合子里面有一个子盒子，需要加视距进行旋转的话，需要保持子盒子在父盒子的中心点或者子盒子和父盒子大小一样，因为视距的中心点是在屏幕正中间，否则会导致盒子偏向某一侧旋转。

z轴为面相屏幕，如图，图中手指分别代表：x，y，z(z轴近大远小)三轴，手指向均为负值，左上前为负原则。

transform:rotate3d(x，y，z)单位deg(1turn＝360deg)

transform：rotateX（deg）正数为上方往后倾倒，负数为下方往后倾倒。如图：大拇指指向X轴正值，四根手指弯曲所指的方向就是x轴正值旋转的方向。

 

transform：rotateY（deg）正数为左向右转，负数为右向左转。如图；大拇指指向Y轴正值，四根手指弯曲所指的方向就是Y轴正值旋转的方向。

 

transform：rotateX（deg）

正数顺时针，负数逆时针，和rotate一样

3D立体呈现

给父级添加transform-style：preserve-3d，(变形选择使用3d)否则使用z轴立体空间不生效，使子元素处于真正的3d空间，默认值为2D空间(flat)。

 

动画先定义后调用

定义单组动画(关键帧)@keyframes + 动画名｛

from｛起始帧｝

to｛结束帧｝

｝

 

 

定义多组动画(关键帧)@keyframes + 动画名｛

0%｛｝

25%｛｝

50%｛｝

75%｛｝

100%｛｝

百分相对于动画设置的时间运行

｝

 

调用动画

使用多组动画用逗号隔开

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画反向 动画完毕时状态。

速度曲线：匀速linear 逐帧动画steps（动画几帧走完）

重复次数：无限循环infinite

动画方向：原路返回alternate

动画完毕时状态：停留在最后一帧状态，不循环状态使用forwards

 

动画暂停：animation-play-state(动画播放状态)：paused（暂停）