首頁 > 文章 > web前端 > CSS3中transform屬性怎麼使用

CSS3中transform屬性怎麼使用

php中世界最好的语言原創: 2017-12-01 11:38:362198瀏覽

大家都知道CSS3的transform屬性，因為我們常常用的到它，那麼今天就給大家好好解析一下，這個transform究竟怎麼使用，transform的使用方法以及語法。

語法：none|[]* 初始值是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中文網其它相關文章！