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