实现平面转换和渐变

使用transform属性实现元素在平面内的位移、旋转、缩放等效果

位移：translate

transform: translate(x, y);-----像素单位数值 /百分比

transform: translateX(值);        transform: translateY(值);      

定位盒子居中：

  div {left:50%;
       transform: translate(-50%);
       top:50%;
       transform: translate(0,-50%);}

旋转：rotate  

角度（deg）

旋转方向：正值顺时针，负值逆时针

转换中心点： transform-origin 

多重转换：旋转放在最后，旋转会改变坐标轴向

缩放：scale 

大于1，表示放大，小于1，表示缩小

渐变：使用background-image属性添加渐变背景效果

 background-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.5),
          transparent);