变形 transform
变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）
2D转换
1 位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法:transform: translate(x, y); transform: translateX(x); transform: translateY(y);
问题：
-
他和margin有啥区别。
- margin移动盒子会影响其余的盒子。把其他人挤走。
- 位移translate移动盒子不会影响其他的盒子。不脱标。
注意：
移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度
2 旋转 rotate 旋转可以让盒子旋转角度。
语法： transform: rotate(45deg); 一定写单位
如果是正度数，则是顺时针旋转
如果是负度数，则是逆时针旋转
2.1 设置中心点 transform-origin
/* 设置旋转的中心点位置 */ transform-origin: right bottom;
2.2 多形态变形小技巧
1.1 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
transform: translate(-50%, -50%) rotate(360deg);
1.2 注意，多个值之前用 空格隔开。
3 缩放 scale
语法： transform: scale(1.2)；
它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。
4 渐变
基本语法：background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))；
