一、空间转换

1、坐标轴特点

X（右）Y（下）Z（前）

2、位移

transform:translate3d(x,y,z);
transform:translateX(x);
transform:translateY(Y);
transform:translateZ(Z);

z轴 （设置透视属性）

perspective：800px~1200px

注意：该属性添加给父级，实现近大远小、近实远虚效果

旋转

transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);

左手法则

判断旋转方向：拇指指向旋转轴正值方向，四指指向方向为正值。

3D立体呈现

步骤：

1、给父元素设置：transform-style：preserve-3d（使子元素处于真正的3d空间）

2、按需求设置盒子的位置（位移或旋转）

注意：旋转会改变该盒子页面的轴向，旋转过后位移的方向需要设置正确的轴向。

缩放

transform：scaleX（倍数）;
transform：scaleY（倍数）;
transform：scaleZ（倍数）;
transform：scale3d（x,y,z）;

动画

使用步骤

1、定义动画

@keyframe 动画名称{from{}to{}
}

2、调用动画

animation：动画名称 执行时间 数度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;
animation: change 3s linear/steps 3s infinite alternate forwards

注意：动画名称和动画时长必须赋值

取值不分先后顺序

如果有两个时间值，第一个表示动画时长，第二个为延迟时间

动画与动画之间用“，”隔开，可以调用多个动画

动画属性之间用空格隔开

3、背景大小设置

background-size:contain
background-size:cover