大家都知道CSS3的transform屬性,因為我們常常用的到它,那麼今天就給大家好好解析一下,這個transform究竟怎麼使用,transform的使用方法以及語法。
語法: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中transform屬性怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!