CSS3 2D或者3D转换

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

• 移动：transform
• 旋转：rotate
• 缩放：scale

2D转换是改变标签在二位平面上的位置和形状的一种技术

 

 

•  2D转换之移动 translate

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

语法：

　　transform:translate(x,y); 或者分开写

　　transform:translateX(n);向X轴平移

　　transform:translateY(n);//向Y轴平移

 

 

 

 

 

 特点：

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

如下：