css3 transform

在2D或3D空间中的变形属性，包括位移，旋转，缩放，倾斜…

1、位移：

transform:translate(水平位移，垂直位移);
transform:translate(水平位移);
transform:translateX(水平位移);
transform:translateY(垂直位移);

默认情况：正值从上往下，从左往右，可为负值。

2、旋转：

transform:rotate();	属性值单位为deg，表度数

属性值：left right top bottom / 具体像素值

旋转基点：transform-origin:水平值 垂直值;
		(默认旋转基点为中心点)

3、缩放：

transform:scale(水平缩放，垂直缩放);
transform:scale(水平垂直缩放);
transform:scaleX(水平缩放);
transform:scaleY(垂直缩放);
	
取值范围：0 - 0.9999... 缩小
				 1		不变
		       > 1		放大

4、倾斜：

transform:skew();属性值单位为deg，表度数

transform:skew(水平倾斜，垂直倾斜);
transform:skew(水平倾斜);
transform:skewX(水平倾斜);
transform:skewY(垂直倾斜);

同一个元素可同时添加多个不同的变形属性，例如：

transform:translateX(100px) rotate(30deg) scale(2);

transform通常与transition(过渡)一起使用，使元素在变形时的动画显得平滑不生硬

例如：
transition:all/过渡属性 过渡时间 延迟时间 运动类型;
transition:all 0.5s 3s linear;

实例：

div{
	width:200px;
	height:200px;
	background:pink;
	margin:200px auto;
	transition:all 1s linear;/*transition属性添加给变形的元素*/
}
div:hover{
	    transform-origin:right bottom;
	    /*设置旋转基点为元素的右下角*/
	    transform:translateX(50px) rotate(40deg) scale(1.5) skewY(20deg);
	    /*元素水平向右位移50px，绕右下角顺时针旋转40°，水平垂直均放大为原来的1.5倍，在垂直方向顺时针倾斜20°*/
}

<div></div>