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