css3 transform属性和使用方法

CSS3 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

属性及方法

rotate
定义 旋转，在参数中规定角度。
旋转该元素，配合着transform-origin属性，(没有设置transform-origin属性也可以，只不过是根据该元素的中心点旋转，也就是center center)
可以设置(rotateX(),rotateY(),rotateZ())还有个rotate3d();

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

origin
设置旋转元素的基点位置：
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
为了更好地理解 transform-origin 属性，请查看这个演示。
transform-origin: x-axis y-axis z-axis;

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); 		/* IE 9 */
-ms-transform-origin:20% 40%; 		/* IE 9 */

-webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

-moz-transform: rotate(45deg);		/* Firefox */
-moz-transform-origin:20% 40%;		/* Firefox */

-o-transform: rotate(45deg);		/* Opera */
-o-transform-origin:20% 40%;		/* Opera */
}

scale
定义 缩放转换。
scale();scaleX();scaleY();scaleZ();scale3d();
改变的不是元素的宽高，而是x和y轴的刻度；
缩放该元素，>1 放大， <1 缩小 默认值是 1；

div{
	transform:scale(2,2)
}

skew
定义沿着 轴的 倾斜转换
skew();skewX();skewY();
定义沿着 X 和 Y 轴的 2D 倾斜转换。改变的是 轴的刻度。

div{
	transform:skew(20deg)
}

translate
translate();translateX();translateY();translateZ();translate3d()
就是平移，参考自己的位置来平移;
电脑屏幕离你越近，那么translateZ() 里面的值 越大， 电脑屏幕离你越远， translateZ() 的值就越小。
translate3d 是同时设置 translateX ，translateY 和 translateZ 里面必须填三个参数。

div{
	transfrom:translate(100px, 100px)
}