html5 2D动画简单概念

2D移动、缩放、转动、拉长或拉伸

注：只设置一个X或Y

transform:

         translate()
         rotate()在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
		rotateX(),rotateY()
		
		scale(宽度,高度)
		scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 缩放：
		设置为负数镜像方式放大缩小
		scaleX(X),scaleY(Y)
		skew(Xdeg,Ydeg)
		包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，
		则默认为0，参数为负表示向相反方向倾斜。
		skewX(Xdeg)
		skewY(Ydeg)
		
		不常用
		matrix(1,2,3,4,5,6)复合属性
		transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);
		matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

引用 ：

         css随便设置
         
         <button type="button" onclick="func1()">按钮1</button>
		<button type="button" onclick="func2()">按钮2</button>
		<div class="box1">1111</div>
		<div class="box2">2222</div>
    
     <script type="text/javascript">
	var box1 = document.getElementsByClassName("box1")[0];
	    function func1(){
	   box1.style.transform = "translate(100px,200px)";
	    box1.style.transform = "translateX(100px)";
		// box1.style.transform = "translateY(200px)";
		// box1.style.transform = "rotateX(30deg)";
		// box1.style.transform = "scale(0.5,1)";
		// box1.style.transform = "scaleX(2)";
		// box1.style.transform = "scaleY(1)";
		// box1.style.transform = "skew(30deg,0deg)";
		// box1.style.transform = "matrix(1,0,0,1,0,0)";
		// box1.style.transform = "rotate(45deg)";
		// transform-origin:20% 40%;
	}
	function func2(){
		box1.style.transform = "rotateY(90deg)";
		box1.style.transform = "scale(1,1)";
		// box1.style.transform = "scaleX(1)";
		// box1.style.transform = "scaleY(3)";
		// box1.style.transform = "rotate(45deg)";
		// box1.style.transformOrigin = "-10% 0%";
		
	}
```</script>