2D转换（transform）

2D转换之移动 translate
2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位。
语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
重点
translate最大的优点：不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
2D转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。
语法
transform: rotate(度数);
重点
rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正数，顺时针，负数为逆时针
默认旋转的中心点是元素的中心点
附加
过渡：过渡写在本身上，谁做动画给谁加
transition: all 0.3s;
2D转换中心点 transform-origin
我们可以设置元素转换的中心点
语法
transform-origin: x y;
重点
注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给x y 设置像素或者方位名词（top bottom left right center）
2D转换之缩放 scale
缩放，顾名思义，可以放大缩小。只要给元素添加上这个属性就能控制它放大还是缩小。
语法
transform :scale(x,y);
注意
注意其中的X和Y 用逗号隔开。
transform :scale(1,1); 宽高都放大一倍，相当于没有放大；
transform: scale(2,2); 宽高都放大2倍；
transform: scale(2) 只写一个参数，第二个参数子和第一个参数一样，相当于scale(2,2);
transform: scale(0.5,0.5); 缩小；
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。

综合性写法
transform:translate() rotate() scale()
注意：
其顺序会影响转换效果
当我们同时有位移和其他属性时，记得要将位移放到最前面。