transform是css3的新特性之一。有了它可以box module變的更真實，這篇文章將全面介紹關於transform的使用。
transform的作用
transform可以讓元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。 這些屬性定義上都從屬於transform，因此把它們直接作為transform的value來表達。
transform的兼容寫法
當然使用css3的實現一般都不會兼容低版面的IE,這里整理其他瀏覽器的兼容寫法如下：
1 div 2 { 3 transform:rotate(7deg); 4 -ms-transform:rotate(7deg); /* IE 9 */ 5 -moz-transform:rotate(7deg); /* Firefox */ 6 -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ 7 -o-transform:rotate(7deg); /* Opera */ 8 }
辦公資源網址導航 https://www.wode007.com
說明：Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。Opera 只支持 2D 轉換。
transform語法
1 transform: none|transform-functions;
none:表示不進么變換；表示一個或多個變換函數，以空格分開；換句話說就是我們同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。
transform-functions取值：transform屬性實現了一些可用SVG實現的同樣的功能。它可用於內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素，他有幾個屬性值參數：rotate;translate;scale;skew;matrix。
transform常用屬性
transform:rotate()：
旋轉； 單位deg，設置的值為正數表示順時針旋轉，如果設置的值為負數，則表示逆時針旋轉。
transform:translate()：
移動/位移；向右向上為整數，向左向下位移則為負“-”。
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。
transform:scale()：
比例；比例放大用整數，縮小則為負“-”。
scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。並以X為准。
scaleX() ： 使用 [sx,1] 縮放矢量執行縮放操作，sx為所需參數。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認值是(1,1)。
scaleY() ： 使用 [1,sy] 縮放矢量執行縮放操作，sy為所需參數。scaleY表示元素只在Y軸（垂直方向）縮放元素。
transform:skew()：
傾斜/扭曲；參數表示傾斜角度，單位deg。
skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）;
transform:matrix
js對transform的取值和賦值
賦值如下：
1 element.style.webkitTransform = ""; 2 element.style.webkitTransform = ""; 3 element.style.MozTransform = ""; 4 element.style.msTransform = ""; 5 element.style.OTransform = ""; 6 element.style.transform = "";
取值通過:
1 if(element.currentStyle){ 2 return element.currentStyle['transform']; 3 }else{ 4 return getComputedStyle(element,null)['transform']; 5 }
當然transform的屬性還對應3D的，這塊平時我們使用的比較少，這里就沒做具體的介紹了，大家有詳情可以去深入研究。