变形 transform（2D）

变形 transform

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

2D转换 

1 位移 translate

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

语法:

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

问题：

1. 他和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))