空间转换
空间转换就是在平面的基础上多了z轴方向
z轴：从屏幕指向自己的方向，为z轴正方向，指向屏幕内部为反方向。
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
透视：perspective（pp）
利用perspective属性让空间转换看起来有近大远小的效果
perspective属性需要设置给父级元素。
perspective：800px；
其中800px指观察者与z=0的平面之间的距离，数值越小，“近大远小”的效果越明显。
空间旋转——左手法则
描述1：（某物体）沿着x轴正方向旋转90°
含义：调整视角，使得x轴正方向指向自己，此时物体顺时针旋转90°
描述1：（某物体）沿着x轴反方向旋转90°
含义：调整视角，使得x轴反方向指向自己，此时物体顺时针旋转90°
左手法则：
描述1：左手拇指与手掌垂直，余下四指握拳，拇指朝向为x轴正方向，四指环绕方向即为物体旋转方向。
描述2：左手拇指与手掌垂直，余下四指握拳，拇指朝向为x轴反方向，四指环绕方向即为物体旋转方向。
3D效果：transform-style: preserve-3d
属性设置给父级，效果与perspective不同，perspective只能实现透视效果。
image.png
动画效果
能设置过渡效果就可以设置动画效果
步骤：
1，定义动画：@keyframes与标签选择器同级
image.png
2，调用动画：哪个元素调用动画，animation就写在哪里
image.png
animation属性连写：
image.png
同一个元素调用多个动画，需要连写，用逗号隔开
image.png
补间动画和逐帧动画
区别：
补间动画连续性更强，
逐帧动画一般用steps属性值实现
如
image.png
