2D转换
**转换（transform）**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
- 移动：translate
- 旋转：rotate
- 缩放：scale
1.2D转换之移动translate
2D移动式2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);
重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点：不会影响其他元素的位置
- translate中的百分比单位是相对于自身元素的。translate:(50%, 50%)
- 对行内标签没有效果
2.2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法
transform: rotate(度数);
重点
- rotate李卖弄跟读书，单位是deg。比如rotate(45deg)
- 角度为正时，顺时针；负时，为逆时针
- 默认旋转的中心点事元素的中心点
3.2D转换之中心点transform-origin
语法
transform-origin: x y;
重点
- 注意后面的参数x和y用空格隔开
- x y 默认旋转的中心点是元素的中心点即(50% 50%)
- 还可以给x y 设置像素或者方位名词(top right bottom left center)
4.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缩放最大的优势： 可以设置转换中心点缩放，默认以中心带你缩放的，而且不影响其他盒子。
5.2D转换综合写法
注意
1.同时使用多个转换，其格式为：transform: translate() rotate() scale() ...
2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3.当同时有位移和其他属性的时候，要将位移放到最前
