css3的一些新特性——2D转换

坐标轴

转换（tranform）可以实现元素的位移、旋转、缩放等效果。简单理解成变形

2D即二维

二维坐标，越往右越大，越往下越大

1、2D移动 

通常利用定位和translate实现元素水平和垂直居中

直接写translate时只有x或y是允许的，但是要写0，不能省略,使用%时是相对自身来说的

2、2D旋转

单位是deg

利用旋转属性可以实现搜索框的 小三角

div::after {
      content: "";
      position: absolute;
      top: 10px;
      right: 10px;
      width: 10px;
      height: 10px;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      transform: rotate(45deg);
    }

3、转换中心点

4、2D缩放

用逗号隔开，里面写数字，数字表示倍数。要实现等比例缩放只写一个参数就可以

以中心点向四周缩放

用来实现图片放大效果时，常给父元素添加overflow:hidden;这样就不会超出原来盒子的大小，并添加过渡效果（谁做过渡给谁加），所以这边是给img加transition:all .4s;

直接用width和height改变宽高的话上面那条边不改变向左右和下面放大，会影响到下面的内容。

综合写法：

有位移和其他属性时，位移一定要写在最前面