css3-2D转换

转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）可简单理解为变形
● 移动：translate
● 旋转：rotate
● 缩放：scale
二维坐标系

2D转换之移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：

transform:transl(x,y);
transform:translateX(n);
transform:translateY(n);

重点：
● 定义2D转换中的移动，沿着X和Y轴移动元素
● translate最大的有点：不会影响其他元素的位置
● translate中的百分比单位是相对于自身元素的translate:(50%,50%)
● 对行内标签没有效果
2D旋转之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法：

transform:rotate（度数）

重点：
● rotate里面跟度数，单位是deg比如rotate(45deg)
● 角度为正时，顺时针，负时，为逆时针
● 默认旋转的中心点是元素的中心点
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缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子