变形 transform（2D）

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

位移 translate

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

语法：

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

translate和margin的区别

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

位移经常需要的场景：

• 比如 盒子上下移动不影响其他盒子
• 盒子水平和垂直居中，写法简单
• 轮播图的动画效果

注意：

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

 transform: translateX(100%);

旋转 rotate

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

语法：

transform: rotate(45deg);    //一定写单位

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

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

设置中心点 transform-origin

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

transform-origin: right bottom;

多形态变形小技巧

1. 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。

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

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

缩放 scale

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。