空间转换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(暂停)