css3 2D转换（transform）

transform是css3的属性，向元素应用2d或3d转换，可以运行元素移动，旋转，倾斜，伸缩

translate()方法 位移  单位px
三种参数方式：translate(x,y) x轴y轴同时移动   translateX(x) 仅x轴移动   translateY(y) 仅y轴移动

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

 rotate()方法  旋转  正值是顺时针旋转  负值时逆时针旋转  单位deg度

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

deg是单位表示度，上面的意思就是顺时针旋转30度

scale()方法  收缩  元素的尺寸会增加或缩小，根据给定的宽度(x轴)和高度(y轴)参数   scaleX(n)  scaleY(n)  n是缩放倍数，可以说小数点

div{
    transform:scale(2,4);
    -moz-transform:scale(2,4);  /* firefox */
    -webkit-transform:scale(2,4); /* safari  chrome */
    -o-transform:scale(2,4);  /* opera */
    -ms-transform:scale(2,4); /* ie9 */
}

/* 宽度转为原始尺寸的2倍， 高度为原始尺寸的4倍 */

skew()方法 倾斜  根据给定的水平线（X 轴）和垂直线（Y 轴）参数  skewX(n)  skewY(n)  n是倾斜度数单位deg

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

/* 值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度 */

transform-origin 改变原点位置  和 transform一样是css3的属性