您好,登錄后才能下訂單哦!
這篇文章主要介紹使用transform的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
transform是css3的新特性之一。有了它可以boxmodule變的更真實,這篇文章將全面介紹關于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:rotate():
旋轉;單位deg,設置的值為正數表示順時針旋轉,如果設置的值為負數,則表示逆時針旋轉。
transform:translate():
移動/位移;向右向上為整數,向左向下位移則為負“-”。
translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(Y)僅垂直方向移動(Y軸移動)。
以上是“使用transform的方法”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。