css3的transform中scale縮放的分析

這篇文章主要介紹了css3的transform中scale縮放的使用方法,需要的朋友可以參考下

下面我們從3個方面開始介紹：

1、scale( x,y) 將元素縮放

X表示水平方向縮放的倍數| Y表示垂直方向的縮放倍數
Y是一個可選參數，沒有設定的話，則表示X，Y兩個方向的縮放倍數是一樣的。並以X為準。
transform:scale(2,2.5); 
2、scaleX() 元素只在X軸（水平方向）縮放元素。
預設值是1，基點一樣在元素的中心位置。可以透過transform-origin來改變基點
transform:scaleX(2); 
3、scaleY() 元素只在Y軸（垂直方向）縮放元素。
基點一樣在元素的中心位置。可以透過transform-origin來改變基點。
transform:scaleY(2); 

最後我們來看看相容性寫法：

程式碼如下:

.test{  
  -moz-transform:scale(2,2);  
  -webkit-transform:scale(2,2);  
  -o-transform:scale(2,2);  
  background:url(img/i.png) no-repeat;    
  width:198px;  
  height:133px;   
}

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於CSS的背景background和background-position的分析

關於CSS中的before和:after偽元素的使用分析

以上是css3的transform中scale縮放的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！