空间转换

空间转换就是在平面的基础上多了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