下面我們從3個(gè)方面開始介紹:
1、scale(x,y) 對(duì)元素進(jìn)行縮放
X表示水平方向縮放的倍數(shù) | Y表示垂直方向的縮放倍數(shù)
Y是一個(gè)可選參數(shù),沒有設(shè)置的話,則表示X,Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。
transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X軸(水平方向)縮放元素。
默認(rèn)值是1,基點(diǎn)一樣在元素的中心位置。可以通過transform-origin來改變基點(diǎn)
transform:scaleX(2);
3、scaleY(<number>) 元素只在Y軸(垂直方向)縮放元素。
基點(diǎn)一樣在元素的中心位置??梢酝ㄟ^transform-origin來改變基點(diǎn)。
transform:scaleY(2);
最后我們看看兼容性寫法:
復(fù)制代碼代碼如下:
.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;
}
新聞熱點(diǎn)
疑難解答
圖片精選