2D移动和拉伸

1.input中15种type类型中文和英文 

button  按钮 text 默认文本 radio 单选 checkbox 复选框 submit  提交

password  密码 reset 重置 color  颜色 number  数字 file   上传文件

url  网址 email 邮箱 tel手机号 search 搜索框 date  日期 range  滑块

time 时间 month  月 week 周

2.弹性盒子中复合属性的值有哪些？中文和英文

flex-direction代表的值有：

row横向从左到右排列（左对齐），默认的排列方式。

row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column 纵向排列

column-reverse 反转纵向排列，从后往前排，最后一项排在最上面

flex-wrap代表值有：

nowrap 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse 反转 wrap 排列。

2D移动、缩放、转动、拉长或拉伸。
注：只设置一个X或Y
	transform:
	translate()
	translate(x,y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
	translateX(x),translateY(y)
	transform-origin(x,y)设置旋转中心点
	transform-originX(X)
	transform-originY(Y)
	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 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

<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>