CSS3中transform屬性怎麼使用

大家都知道CSS3的transform屬性，因為我們常常用的到它，那麼今天就給大家好好解析一下，這個transform究竟怎麼使用，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個數值。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3關於translate屬性的詳細介紹

CSS3關於background-size屬性的詳細介紹

Css3中transform屬性的使用教程