css 2D转换

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

1.移动：translate

语法：

transform:translate(x,y)或者分开写
transform:translateX（n）
​transform:translateY（n）

优点：

1.定义2D转换中的移动，沿着x和y轴移动元素

2.translate最大的优点：不会影响到其它元素的位置

3.translate中的百分比单位是相对于自身元素（宽度或高度）的translate:(50%,50%)

4.对行内标签没有效果

2.旋转：rotate

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

语法：

transform:rotate(度数)

重点：

1.rotate里面跟度数，单位是deg 比如 rotate(45deg)

2.度数为正时，顺时针，负时，为逆时针

3.默认旋转的中心点是元素的中心点

2D转换中心点transform-origin

可以设置元素转换的中心点

语法：

transform-origin: x y;

重点：

1.注意后面的参数x和y用空格隔开

2.xy默认转换的中心点是元素的中心点（50% 50%）

3.还可以给x y设置 像素 或者 方位名词 （top bottom left right center）

3.缩放：scale

语法：

transform:scale(x,y)

注意：

1.注意其中的x和y用逗号分隔

2.transform:scale(1,1)：宽和高都放大一倍，相对于没有放大

3.transform:scale(2,2)：宽和高都放大了2倍

4.transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

5.ransform:scale(0.5,0.5)：缩小

6.sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子

2D转换综合写法

注意：

1.同时使用多个转换，其格式为：transform:translate() rotate() scale()...等

2.其顺序会影响转换效果。（先旋转会改变坐标轴方向）

3.当我们同时有位移和其它属性的时候，记得要将位移放到最前