2D转换——网页二维坐标系。转换transform可以实现元素的位移、旋转、缩放等效果。转换可以理解为变形。

transform: 属性            位移translate    旋转rotate    缩放scale

一、2D转换之位移translate

移动盒子的方法：定位、盒子的外边距、2D转换位移translate

transform:translate(x,y)    数值单位都是像素px

transform:translateX(x)    只移动x轴

transform:translateY(y)    只移动y轴

（1）translate最大的优点就是不会影响其他元素的位置

（2）translate中的百分比单位是相对于自身元素的，translate:(50%,50%)

（3）对行内元素没有效果

附：盒子垂直居中方法：定位+边框移动（需要计算），现在可用定位+2D转换位移translate:(-50%,-50%)

二、2D转换之旋转rotate

transform:rotate(度数) 

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

（2）度数为正时，顺时针；角度为负时，逆时针。

（3）默认旋转的中心点是元素的中心点。

设置2D转换中心点transform-origin

transform-origin: x y  

（1）后面参数x和y用空格隔开

（2）x和y默认转换的中心点是元素的中心点（50% 50%）

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

三、2D转换之缩放scale

transform:scale(x,y)     

（1）x、y即宽高的倍数，不加单位

（2）可以只跟一个参数，代表宽高同倍数缩放，比如transform:scale(0.5)  

（3）scale比起直接修改width、height的优点在于不会影响其他的盒子，而且可以设置中心点。

2D转换综合写法以及顺序问题

（1）同时使用多个转换，其格式为：transform:translate() rotate() scale()  中间用空格隔开即可

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

（3）当同时有位移和其他属性时，一定要将位移放在最前面