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

位移translate

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

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

位移和margin区别：

• margin移动盒子会影响其他盒子。
• 位移translate不会影响其他盒子，不脱标。

需要使用位移的场景：

• 盒子移动不影响其他盒子
• 盒子水平和垂直居中，写法简单
• 轮播图的动画效果 移动时可以使用百分比，如果使用百分百，移动的是盒子自身宽度
  transform: translateX(100%);

使用位移translate让盒子水平和垂直居中

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

旋转rotate

旋转可以让盒子旋转角度
transform: rotate(45deg);
单位不能少，正值顺时针旋转，负值逆时针旋转。

旋转中心点设置 transform-origin

transform-origin:bottom

多形态变形

如果同时移动和旋转，必须先写移动，后写旋转，顺序会影响代码执行。
transform: translate(-50%, -50%) rotate(360deg);

缩放 scale

transform: scale(1.2)；
根据中心点缩放，不会影响其他盒子

倾斜 skew

transform:skew(30deg);
(非原创，仅作为学习笔记)