1.transform（转换）可以实现元素的位移，旋转，缩放等效果（可以简单理解为变形）
移动：translate 旋转：rotate 缩放：scale
2. 2D 转换之移动 translate
可以改变元素在页面中的位置，类似定位。
语法：
transform：translate(x,y); 或者分开写
transform：translateX( n );
transform：translateY( n );
重点：
1. 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
2. translate 最大的优点：不会影响到其他元素的位置
3. translate 中的百分比单位是相对自身元素的translate:(50%,50%);
4. 对行内标签没有效果
3. 2D 转换之旋转 rotate
2D 转换指的是让元素在 2维平面内顺时针或者逆时针旋转。
语法：
transform:rotate(度数)
重点：
1. rotate 里面跟度数，单位是 deg 比如 rotate(45deg)
2. 角度为正时，顺时针，负时，为逆时针
3. 默认旋转的中心点是元素的中心点
4. 2D转换中心点 transform-origin
可以设置元素转换的中心点
语法：
transform-origin:x y;
重点：
1. 注意后面的参数 x 和 y 用空格隔开
2. x y 默认转换的中心点是元素的中心点 （50% 50%）
3. 还可以给 x y 设置 像素 或者 方位名词（top bottom left right center）
5. 2D 转换之缩放 scale
缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性，就能控制它放大还是缩小。
语法：
transform：scale(x,y)；
重点：
1. 其中的 x 和 y 用逗号分隔，里面参数是数字，不跟单位，可以是小数
2. transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
3. transform:scale(2,2)：宽和高都放大了2倍
4. transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
5. transform:scale(0.5,0.5)：缩小
6. scale 缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
6. 2D 转换综合写法
注意：
1. 同时使用多个转换，其格式为：transform:translate() roate() scale() 等
2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前