CSS3中transform屬性怎么用

這篇文章主要介紹了CSS3中transform屬性怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

語法：none|<transform-function>[<transform-function>]* 初始值是none。

transform-function函數取值：

matrix():定義矩陣變換。

translate():移動元素對象。

scale():縮放元素對象。

rotate():旋轉元素對象。

skew():傾斜元素對象。

例如(兼容瀏覽器)：

1.rotate()函數：transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.scale()函數：transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);

當為scale傳遞不同的參數值時，縮放動畫效果是不同的。scale(1,2)意思是寬度保持不變，高度變為原來的2倍。scale(1,-2)意思是寬度保持不變，高度變為原來的2倍且旋轉180度。

3.translate()函數：transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);參數可以是負的像素值。

4.skew()函數：transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);會改變元素的形狀，而rotate函數不會改變元素的形狀。

5.matrix()函數：transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0);參數為6個數值。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中transform屬性怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!