移动web-transform（2D）

1、位移（translate）

margin移动盒子会影响其他的盒子把其他的盒子挤开

tranform不会影响其他盒子，不脱标，

位移的值可以是 数值+px   也可以是百分比  ，百分比移动的是盒子自身的宽度。

 transform: translateX(100%) translateY(100%);

 transform: translateX(100px) translateY(100px);

2、旋转 （rotate）

        rotate（数值+deg）

        单位是：deg

        正数则是顺时针旋转，负数则是逆时针旋转；

旋转的中心点设置：transform-origin

 transform-origin: right bottom;

多形态变换技巧：

如果既需要移动又需要旋转  则要先写移动 后写旋转；

 transform: translate(-50%, -50%) rotate(360deg);

多个值之间用空格隔开；

3、缩放 （scale）

scale（数值）

初始比例为1  大于1为放大   小于1为缩小；没有单位；

transform: scale(1.2)；

用中心点来进行缩放，不会影响其他盒子；