css的2D变形

CSS的2D变形：
一、 2d的位移：
语法：均可为负值
1、transform:translate(x,y);
也可以分开来写：
2、transform:translateX(x轴移动的距离);
3、transform:translateY(Y轴移动的距离);

       二、2D的旋转：
       语法：
	    1、transform:rotate(30deg);（deg度数单位，负值为逆时针）
	    可以分开来写：
        2、transform:rotateX(30deg);
        3、transform:rotateY(30deg);

       三、2d的缩放：
       语法：
    	1、transform:scale(x,y);
        	x 、y  这两个参数为一个数字，大于1是放大  小于1是缩小
        	可以分开来写
    	2、transform:scaleX();
        3、transform:scaleY();
      四、 2d的倾斜：（不常用）
      语法：
	     1、transform:skew(deg);
        	可以分开写指定x,y的倾斜
            transform:skewX(deg);
            transform:skewY(deg);
 2D的变形原点：
默认的原点都在元素的中心。
可通过下面属性改变变形原点：
语法：
    transform-origin:x y;            
    属性值：
            left top
            10px 20px（可为负值）
            10%  20%
            center
注：缩放和旋转对位移的影响：
在多个功能函数共同使用的情况下，尽量先写位移，后写其他的功能函数。（如果后写位移，那么前面的函数会影响后面位移的坐标。）