css的属性

1.位移：translate

    div{
        width: 200px;
        height: 200px;
        background: red;
         位移的起始点在左上方 
        transform: translateX(100px);
         X 轴位移 
        transform: translateY(100px);
         Y轴平移 
        transform: translateX(100px);
        transform: translateY(100px);
         两个同时写会被下面的覆盖 
        transform:translate(100px,100px);
         复合属性，两个参数，第一个表示X轴和第二个表示Y轴 
        transform:translate(100px,0);
         X 轴距离左边100px 
        transform:translate(0,100px);
         y轴距离上面100px 

    }

2.缩放：scale

        transform: scale(2);
        放大本身的两倍，一个值表示x轴和y轴都是2，是从中心点缩小放大 
        transform: scaleX(2);
        这个表示在X轴方向放大，高度不变
        transform: scaleY(2);
        这个表示在Y轴方向放大，宽度不变 
        scale为1的时候表示它本身，不会变
        小于1表示缩小
        transform: scale(2,1);
        表示X轴两倍，Y不变，不可以写0，0会消失（只放大X轴）
        transform: scale(1,2);
       表示Y轴两倍，X不变，不可以写0，0会消失（只放大Y轴）

3.倾斜：skew

         度数单位deg (skew是倾斜函数，元素不会旋转，会改变图片的形状)
          transform: skew(60deg,0deg);
         第一个参数表示X轴，按照逆时针方向旋转，宽度变化，高度不变，同transform: skewX（60deg）;
         第二个参数表示y轴，按照顺时针方向旋转，高度变化，宽度不变，同transform: skewY（60deg）;
         

4.旋转：rotate

单位deg（只会旋转，不会改变元素的形状）

       transform: rotateX(30deg);
       沿着X轴旋转，改变高度（上下）
       transform: rotateY(30deg);
       沿着Y轴旋转，改变宽度（左右）
       transform: rotate(30deg）;
       沿中心点旋转，改变宽高（旋转）