css3 2D转换

css3 2D转换（二维坐标系）

转换（transfrom）是css3中具有颠覆性的特征之一即为变形，可以实现元素的位移、旋转、缩放等效果。2d转换类似于定位

到现在为止暂且学过的移动盒子的位置有：定位、盒子的外边距、2D转换

（1）移动：translate

语法
transfrom:translate(x,y);	或者分开写
transfrom:translateX(n);	只移动X轴
transfrom:translateY(n);	只移动Y轴

重点：

​ a.定义2D转换中的移动，沿着X和Y轴移动元素；

​ b.translate最大的优点：不会影响到其他元素的位置；

​ c.translate中的百分比单位是相对于自身元素的translate：（50%，50%）；（通过定位和translate的配合可以实现盒子的居中）

​ 对行内标签没有效果

（2）旋转：rotate

语法
transform:rotate(度数);

重点：

a.rotate里面跟度数，单位是deg比如rotate（180deg）;

b.角度为正时，则为顺时针；负时，则为逆时针；

c.默认旋转的中心点是元素的中心点（设置转换的中心点transfrom-origin:x y;）

（3）缩放：scale

顾名思义就是能控制它的放大和缩小

transfrom:scale(x,y);

注意：

a.里面写的数字不跟单位， 是倍数的意思

b.放大和缩小所代表的数值

​ transfrom:scale(1,1)； 宽和高都放大一倍，相当于没有放大

​ transfrom:scale(2,2)； 宽和高都放大了2倍

​ transfrom:scale(2)； 只写一个参数，第二个参数和第一个参数一样，相当于scale（2， 2）

​ transfrom:scale(0.5，0.5)； 缩小

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

2D转换综合写法

注意：

a.同时使用多个转换，其格式为：transfrom: translate() rotate() scale() ;

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

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