css - 变形位移 translate的使用

二，变形 transform（2D）

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

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

语法：

css
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

---

问题：

 translate和margin的区别。
    margin移动盒子**会**影响其余的盒子。把其他人挤走。
    位移translate移动盒子**不会**影响其他的盒子。不脱标。

>移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 transform: translateX(100%);

---

应用- 盒子水平和垂直

可以让一个子盒子在父盒子里面水平和垂直居中。

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

 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    } 

transfrom：rotate（）  旋转效果