CSS3 : transform 用於元素樣式的轉變，比如使元素發生位移、角度變化、拉伸縮小、按指定角度歪斜

transform結合transition可實現各類動畫效果

transform ：

transform 兼容各瀏覽器寫法如下：

1 transform:              /* 轉變樣式 */;
2 -ms-transform:          /* 轉變樣式 */;        /* IE 9 */
3 -webkit-transform:      /* 轉變樣式 */;        /* Safari and Chrome */
4 -o-transform:           
 
/* 轉變樣式 */;        /* Opera */
5 -moz-transform:         /* 轉變樣式 */;        /* Firefox */

可轉變樣式如下：

1、使元素位置移動：translate，語法：translate(x坐標, y坐標)

1 transform: translate(50px,100px);
2 -ms-transform: translate(50px,100px);        /* IE 9 */
3 -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
4 -o-transform: translate(50px,100px);        
 
/* Opera */
5 -moz-transform: translate(50px,100px);        /* Firefox */

以上代碼使元素位置橫向移動50像素，縱向移動100像素

2、使元素按指定角度旋轉多少度：rotate，語法： rotate(角度值deg)

1 transform: rotate(30deg);
2 -ms-transform: rotate(30deg);        /* IE 9 */
3 -webkit-transform: rotate(30deg);    /* Safari and Chrome */
4 -o-transform: rotate(30deg);        
 
/* Opera */
5 -moz-transform: rotate(30deg);        /* Firefox */

以上代碼使元素順時針旋轉30度，如果值是負值，則是逆時針旋轉

3、使元素按指定的倍數拉伸或縮小，裏面的字體也會同時拉伸或縮小：scale，語法：scale(X軸倍數, Y軸倍數)

1 transform: scale(2,4);
2 -ms-transform: scale(2,4);    /* IE 9 */
3 -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
4 -o-transform: scale(2,4);    /* Opera */
5 -moz-transform: scale(2,4);    /* Firefox */

以上代碼使元素的寬度拉伸2倍，高度拉伸4倍

4、使元素歪斜給定的角度：skew，語法：skew(x軸角度值deg,y軸角度值deg)

1 transform: skew(30deg,20deg);
2 -ms-transform: skew(30deg,20deg);    /* IE 9 */
3 -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
4 -o-transform: skew(30deg,20deg);    /* Opera */
5 -moz-transform: skew(30deg,20deg);    /* Firefox */

transform-origin：

transform-origin用於設置旋轉元素的基點位置，兼容語法：

1 transform-origin:    /* 位置設置 */;
2 -ms-transform-origin:  /* 位置設置 */;
3 -webkit-transform-origin:  /* 位置設置 */;
4 -moz-transform-origin:  /* 位置設置 */;
5 -o-transform-origin: /* 位置設置 */;

位置設置，分三處設置，語法：

1 transform-origin: x-axis y-axis z-axis;

x-axis ： X軸線位置

y-axis ：Y軸線位置

z-axis ： Z軸線位置

位置可以是具體數值、百分比、left、right、center

數值示例：

1 transform-origin:0 100;

百分比示例：

1 transform-origin:20% 40%;

默認值設置：

1 transform-origin: left center;

CSS3 : transform 與 transform-origin 屬性可以使元素樣式發生轉變