CSS3中transform屬性怎么用

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

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

transform-function函數(shù)取值：

matrix():定義矩陣變換。

translate():移動元素對象。

scale():縮放元素對象。

rotate():旋轉(zhuǎn)元素對象。

skew():傾斜元素對象。

例如(兼容瀏覽器)：

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

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

當(dāng)為scale傳遞不同的參數(shù)值時，縮放動畫效果是不同的。scale(1,2)意思是寬度保持不變，高度變?yōu)樵瓉淼?/span>2倍。scale(1,-2)意思是寬度保持不變，高度變?yōu)樵瓉淼?/span>2倍且旋轉(zhuǎn)180度。

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

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

5.matrix()函數(shù)：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);參數(shù)為6個數(shù)值。

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