1. 程式人生 > >css3動畫屬性系列之transform細講scale縮放

css3動畫屬性系列之transform細講scale縮放

span height width 水平 web gin 改變 code num

1、scale(x,y) 對元素進行縮放

  • X表示水平方向縮放的倍數 | Y表示垂直方向的縮放倍數
  • Y是一個可選參數,沒有設置的話,則表示X,Y兩個方向的縮放倍數是一樣的。並以X為準。
transform:scale(2,2.5);  

2、scaleX(<number>) 元素只在X軸(水平方向)縮放元素。
  • 默認值是1,基點一樣在元素的中心位置。可以通過transform-origin來改變基點
transform:scaleX(2);  

3、scaleY(<number>) 元素只在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;   
} 

css3動畫屬性系列之transform細講scale縮放