CSS3：2D转换

1、移动translate

transform：translate（X值，Y值），X、Y值为当前盒子的局部坐标系值，也可使用百分比书写。

当使用translale进行盒子的移动时，原来的位置将会被保留，即不脱标。

当只需要移动一个方向上的位置时，也可使用translateX（）或者translateY（）进行设置。

2、旋转rotate

transform: rotate(45deg);

能够将盒子进行一定角度的旋转，函数名为rotate，函数值为旋转角度数值加上单位（deg）。

对盒子设置rotate进行旋转的时候，页面会保留它原来的位置，并且不会影响到其他盒子。

3、设置旋转中心点

transform-origin: 10% 10%;
transform-origin: 10px 10px;
transform-origin: left bottom;

transform-origin属性可以设置百分比、px值、方位形容词进行控制，当使用百分比时，按照百分比*宽度的值寻找中心点。

4、缩放scale

transform: scale(0.5) ;

transform：sacle（数值 空格 数值），当括号里有两个数值的时候，对应宽度缩放倍数、高度缩放倍数，缩放倍数可以为小数。

transform:scale(2); 当只有一个值时默认同时控制宽高缩放。

 相比于直接控制宽高进行缩放，transform：scale（）；的好处在于它不会影响下面的盒子；即不脱标。

transform：scale（）；可以被控制缩放中心 transform-origin（）

5、旋转、缩放、移动连写

旋转和缩放允许被连写，且不分先后顺序，但是由于旋转的时候会导致盒子的局部坐标系同时进行旋转，导致移动的紊乱，所以一般先写移动！！！