溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用transform，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
transform是css3的新特性之一。有了它可以boxmodule變的更真實，這篇文章將全面介紹關于transform的使用。
transform的作用
transform可以讓元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。這些屬性定義上都從屬于transform，因此把它們直接作為transform的value來表達。
transform的兼容寫法
當然使用css3的實現一般都不會兼容低版面的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轉換）。Safari和Chrome支持替代的-webkit-transform屬性（3D和2D轉換）。Opera只支持2D轉換。
transform語法
transform:none|transform-functions;
none:表示不進么變換；表示一個或多個變換函數，以空格分開；換句話說就是我們同時對一個元素進行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗號（“，”）隔開，但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。
transform-functions取值：transform屬性實現了一些可用SVG實現的同樣的功能。它可用于內聯(inline)元素和塊級(block)元素。它允許我們旋轉、縮放和移動元素，他有幾個屬性值參數：rotate;translate;scale;skew;matrix。
看完了這篇文章，相信你對“怎么使用transform”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
