語法
transform ：none | <transform-function>[ <transform-function> ]*
取值
指定一個身份轉(zhuǎn)變
說明
應(yīng)用于block水平和inline水平的元素。
transform可以對元素進(jìn)行角度旋轉(zhuǎn)和縮放,請使用webkit內(nèi)核最新版瀏覽器瀏覽該文章以保證CSS3效果能夠完全呈現(xiàn)
在設(shè)置了transform屬性后，可以設(shè)置transform-origin屬性，這個屬性控制變形時(shí)的源點(diǎn)，也就是變形時(shí)圍繞的點(diǎn)。這個屬性接受兩個參數(shù)，可以是百分比、top/center/bottom、帶單位的數(shù)值。
兼容性
瀏覽器支持情況:-webkit-transform,-moz-transform,-o-transform,目前對CSS3動畫支持的最好最全面的是webkit內(nèi)核瀏覽器。
示例
transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。有五種變形樣式，可以重疊多種變形樣式，以空格分隔
1. rotate 旋轉(zhuǎn)效果
語法：-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-tranfsorm:rotate(30deg);
參數(shù)：括號里的參數(shù)表示的是旋轉(zhuǎn)的角度，“deg”即“degree”的縮寫，也就是角度的單位
2. skew 傾斜效果
語法：-webkit-transform:skew(30deg);
-moz-transform:skew(30deg);
-o-transform:translate(120px,50px);
參數(shù)：參數(shù)同rotate
3. scale 縮放效果
scale(0.6)效果 scale(-0.6)效果
語法：-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
參數(shù)：如果參數(shù)小于1則表示縮小，大于1則表示放大
如果參數(shù)為負(fù)數(shù)且絕對值小于1則反轉(zhuǎn)后縮小，否則反轉(zhuǎn)后放大
（4）translate 位移效果
語法： -webkit-transform:translate(120px,100px);
-webkit-transform: translateY(-100%);
-moz-transform:translate(120px,100px)
-o-transform:translate(120px,100px)
參數(shù)：第一個參數(shù)表示的是水平方向上的偏移量
第二個參數(shù)表示的是豎直方向上的偏移量
