CSS空间转换和动画

一、空间转换

Z轴旋转及透视

transform:rotateZ（xxdege）;Z轴与人眼的视线一致，向人眼前旋转为正，向屏幕后旋转为负

透视：属性  perspective：800px-1000px;   
沿着z轴平移或旋转，只有给父级盒子加上透视属性，才能看到效果

X轴及Y轴旋转

transform：rotateX(xxdeg);
transform：rotateY(xxdeg);
根据左手法则：大拇指朝着正轴方向，其余4根手指弯曲朝向自己则为正，否，则为负

3D旋转

transform：rotate3d(X,Y,Z,xxdeg);
x、y、z的值在0-1之间

二、动画

定义动画

定义一：@keyfeames  动画名称{
from{}；
to{};
}

一般只写to{}内容，表示动画结束状态

定义二：@keyfeames  动画名称{
10%{}；
50%{};
100%{};
}

百分比表示时间节点，更加详细

调用动画

animation：  动画名称   动画时长  线性曲线  延迟时间  次数（infinite无限次数）alternate(返回动画)；

动画对象是谁 ，就加给谁

鼠标悬停-动画暂停属性

animation-play-state:paused;

动画暂停对象是谁，就加给谁

多组动画

animation：xxx   xxx   xxx,xxx  xxx  xxx;用逗号隔开

补充

通栏：html,body {height100%}