CSS3 2D转换

transform是CSS3中的特征之一，可以实现元素的位移、旋转、放缩等效果。

移动translate

可以改变元素在页面中的位置，有点类似定位。

transform:translate(x,y);
/*元素向右移动100px，向下移动150px*/
transform:translate(100px.150px);
/*元素向右移动100px,向下移动100px*/
transform:translate(100px);
/*元素向右移动100px*/
transform:translateX(100px);
/*元素向下移动100px*/
transform:translateY(100px);
/*假设元素宽度为100px，则元素向右移动100px*50%=50px*/
transform:translateX(50%);

translate定义2D转换中的移动，该元素的移动不会影响其他元素的位置，且对行内标签没有效果

旋转rotate

让元素在2D平面内进行顺时针旋转或逆时针旋转

transform:rotate(度数)
/*度数单位为deg，例如45deg就是45°，度数大于0则顺时针旋转，小于0则逆时针旋转,默认旋转中心为元素的中心点*/

/*元素顺时针旋转45度*/
transform:rotate(45deg);
/*元素逆时针旋转90度*/
transform:rotate(-90deg);

可以通过transform-origin来指定旋转中心，既可以是具体值也可以是关键字(left,right,top,buttom,center),默认为center center

/*设置变换中心为右下角*/
transform-origin:right,buttom;

/*设置变换中心为左中*/
transform-origin：left，center;

缩放scale

为元素添加了这个属性后，元素的尺寸会增大或缩小

transform:scale(x,y);
/*元素保持不变*/
transform:scale(1,1);
/*元素x变为原来的1.5倍，y变为原来的1.6倍*/
transform:scale(1.5,1.6);
/*元素x、y变为原来的2倍*/
transform:scale(2);

scale属性最大的优点是可以利用transform-origin指定缩放中心点（默认以中心点进行缩放），同时还不会影响其他的盒子。

综合写法

tranform:translate(x,y) rotate(i deg) scale(a,b) ...

同时具有位移和其他属性时，要将位移属性放在最前面，书写顺序不同可能会导致实现效果的不同。