CSS3 2D转换

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

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

1.二维坐标系

2.2D转换之移动 translate

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

语法：

transform:translate(x,y);
只移动X轴上的坐标
transform:translateX(n);
只移动y轴上的坐标
transform:translateY(n);

•  最大的优点：不会影响其他元素的位置
• translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
• translate里面的参数是可以用%的 与盒子自身高度或宽度来对比的
• 对行内标签没有效果

3.2D转换之旋转 rotate

指让元素在2维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数）

重点：

• rotate里面跟度数，单位是deg 
• 角度为正时是顺时针，为负时时逆时针
• 默认旋转的中心点是元素的中心点

4.2D转换中心点transform-origin

语法：

transform-origin: x y;

重点:

• 注意后面的参数x和y用空格隔开
• x y默认转换的中心点是元素的中心点（50% 50%）
• 还可以给x y设置像素或者方位名词（top bottom left right center)

5.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缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

6.2D转换综合写法

注意:

• 格式为：transform: translate() rotate() scale()…
• 其顺序会影响转换的效果
• 同时有位移和其他属性的时候，要将位移放到最前面