首頁 >web前端 >css教學 >css3的transform中scale縮放的分析

css3的transform中scale縮放的分析

不言
不言原創
2018-06-11 15:10:202242瀏覽

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

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

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

X表示水平方向縮放的倍數| Y表示垂直方向的縮放倍數
Y是一個可選參數,沒有設定的話,則表示X,Y兩個方向的縮放倍數是一樣的。並以X為準。
transform:scale(2,2.5); 
2、scaleX(d80b5def5ed1be6e26d91c2709f14170) 元素只在X軸(水平方向)縮放元素。
預設值是1,基點一樣在元素的中心位置。可以透過transform-origin來改變基點
transform:scaleX(2); 
3、scaleY(d80b5def5ed1be6e26d91c2709f14170) 元素只在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中文網其他相關文章!

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