变形
- 通过变形可以对元素的位置、大小、角度等进行修改
- perspective 用来设置透视的效果
- 需要一个长度作为值，长度表示人眼和屏幕的距离，一般设置在body上
- transform用来设置变形或旋转
- 需要通过不同的变形函数来实现元素的变形
- translateX() x轴平移
- translateY() y轴平移
- 设置平移时，如果使用百分比单位，百分比是相对于元素自身大小计算
- translateZ() 用来设置z轴平移
- translate() 可以设置x和y轴的平移
- translate3d() 可以设置x y z的平移
- 当我们对元素进行变形时，只会影响到元素自身，不会影响其他元素的位置
- 通过不同的旋转函数来实现元素的旋转
- rotateX 沿x轴旋转
- rotateY 沿y轴旋转
- rotateZ 沿x轴旋转
- 单位：
- 以通过translate和rotate同时为元素实现旋转和变形，但是两者的前后顺序不同，最后的变换结果也会不同
- transform-origin 指定变形的原点
- scale用来设置缩放
- scaleX() x轴缩放，一般写系数
- scaleY() y轴缩放，一般写系数
- scale() x y 缩放，一般写系数
- scaleZ z轴缩放（需要3d下才能看出效果）
- transform-style: preserve-3d 用来开启3d效果