CSS的2D变换
1. 浏览器的二维坐标
如图所示
2. 2D位移
2D 位移：可以改变元素的位置，具体使用方式：给元素添加转换属性transform。
| 属性名 | 作用 |
|---|---|
| translateX | x轴位移 |
| translateY | y轴位移 |
| translate | 一个值代表x方向，两个值代表：x和y方向。 |
3. 2D缩放
可以控制元素缩放，具体使用方式：给元素添加转换属性transform。
| 属性名 | 作用 |
|---|---|
| scaleX | 设置x轴方向的缩放，1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scaleY | 设置y轴方向的缩放，1 表示不缩放，大于 1 放大，小 于 1 缩小。 |
| scale | 一个值代表同时设置x轴和y轴缩放；两个值分别代表：x缩放、y缩放。 |
4. 2D旋转
可以让元素在二维平面内，进行顺时针和逆时针的旋转。具体使用方式：给元素添加转换属性transform。
| 属性名 | 作用 |
|---|---|
| rotate | 设置旋转角度，单位是deg，正值顺时针，负值逆时针。 |
5. 变换原点
默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点，属性值可以写像素，百分比，left，right，top，bottom。
