怎么使用transform

小編給大家分享一下怎么使用transform，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　transform是css3的新特性之一。有了它可以boxmodule變的更真實，這篇文章將全面介紹關(guān)于transform的使用。

　　transform的作用

　　transform可以讓元素應(yīng)用2D或3D轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。這些屬性定義上都從屬于transform，因此把它們直接作為transform的value來表達。

　　transform的兼容寫法

　　當(dāng)然使用css3的實現(xiàn)一般都不會兼容低版面的IE,這里整理其他瀏覽器的兼容寫法如下：

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

　　說明：InternetExplorer9支持替代的-ms-transform屬性（僅適用于2D轉(zhuǎn)換）。Safari和Chrome支持替代的-webkit-transform屬性（3D和2D轉(zhuǎn)換）。Opera只支持2D轉(zhuǎn)換。

　　transform語法

　　transform:none|transform-functions;

　　none:表示不進么變換；表示一個或多個變換函數(shù)，以空格分開；換句話說就是我們同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

　　transform-functions取值：transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動元素，他有幾個屬性值參數(shù)：rotate;translate;scale;skew;matrix。

看完了這篇文章，相信你對“怎么使用transform”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！