這篇文章主要介紹了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的分析
以上是css3的transform中scale縮放的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!