变形 transform（2D）

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

1.位移translate

translate可以让盒子沿着x轴或者y轴移动 语法

transform: translateX(x);
transform: translateY(y);

他与margin有啥区别:

1.margin移动会影响其他的盒子,把其他的盒子挤走.

2.位移translate移动盒子不会影响其他盒子,不脱标.

注意:移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身宽带

1-1应用- 盒子水平和垂直

{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }

2.旋转rotate

旋转可以让盒子旋转角度。

语法：

    translate:rotate(45deg)

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

2-1设置中心点 transform-origin

/* 设置旋转的中心点位置 */

transform-origin:right bottom;

2-2多形态变形小技巧

1.如果有移动属性,一定要先写移动,不然会影响代码执行

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

2.注意，多个值之前用 空格隔开。

3.缩放scale

语法:

transform: scale(1.2)；