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

CSS3中transform屬性怎麼使用

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

大家都知道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中文網其它相關文章!

相關閱讀:

CSS3關於translate屬性的詳細介紹

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

Css3中transform屬性的使用教學

#

以上是CSS3中transform屬性怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn