CSS3 之 2D转换——移动translate、旋转rotate、旋转中心点transform-origin、缩放scale

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果。

一、二维坐标系

2向右和向下变大

二、2D转换之移动translate

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

1. 语法

transform: translate(x,y);  //或者分开写
transform:translateX(n);
transform:translateY(n);

 2. 重点

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点：不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的宽度或高度，translate:(50%,50%);
• 对行内标签没有效果

三、2D转换之旋转