2D转换之位移（translate）

位移：

  1.语法
        transform：translate(x,y);
        transform：translatex(n);
        transform：translatey(n);
  2.重点
        1.沿着x和y轴移动
        2.不会影响其他元素的位置
        3.可以使用百分比 是对于自身元素translate：（50%，50%） 如果自身宽度为100px 移动translateX( 50%) 相当于向右边移动50px
        4.对行内标签没有效果
  案例：
把鼠标放在盒子上，盒子向x和y轴移动100px，当中使用了伪元素：hover

 .ac:hover {
        transform: translate(100px, 100px);   //鼠标放在盒子上移动
    }
 .ac {
        width: 100px;
        height: 100px;
        background-color: brown;
    }
    <div class=ac></div>

这是起始样子

鼠标放在上面的样子

让盒子垂直居中

使用定位(absolute)和移动(translate)实现盒子居中
1.实现盒子在正中央
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
2. 实现盒子垂直居中
position: absolute;
left: 50%;
top: %;
transform: translate(-50%, 0);
3.实现盒子水平居中
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);