2transform使用方法小结

1移动transform：translate();

一个值得时候：transfom:tranlate(100px)'表示水平方向的移动，等同于transformX.

transformX transformY transformZ分别向X,Y,Z轴移动

两个值得时候：transform

两个值得时候：transform:translate(x,y)向x轴，y轴移动

三个值得时候：transform:translate(x,y,z)

参考坐标：

 

margin和translate区别

1.margin 移动盒子会影响其余的盒子，把其他人挤走

​2.位移translate移动盒子不会影响其它的盒子，不脱标

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top:50px