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