zoom 屬性
語(yǔ)法:
zoom:normal | <number> | <percentage>
默認(rèn)值:normal
適用于:所有元素
繼承性:有
取值:
normal:
使用對(duì)象的實(shí)際尺寸。
<number>:
用浮點(diǎn)數(shù)來(lái)定義縮放比例。不允許負(fù)值
<percentage>:
用百分比來(lái)定義縮放比例。不允許負(fù)值
說(shuō)明:
設(shè)置或檢索對(duì)象的縮放比例。
對(duì)應(yīng)的腳本特性為zoom。
Scale屬性
scale屬性的取值為2個(gè),它本身其實(shí)相當(dāng)于一個(gè)函數(shù),因?yàn)樗膶懛ň秃秃瘮?shù)一樣:
scale();
scale(x);
scale(x,y);
1、scale(x,y) 對(duì)元素進(jìn)行縮放
X表示水平方向縮放的倍數(shù) Y表示垂直方向的縮放倍數(shù)
Y是一個(gè)可選參數(shù),沒(méi)有設(shè)置的話,則表示X,Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。
transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X軸(水平方向)縮放元素。
默認(rèn)值是1,基點(diǎn)一樣在元素的中心位置??梢酝ㄟ^(guò)transform-origin來(lái)改變基點(diǎn)
transform:scaleX(2);
3、scaleY(<number>) 元素只在Y軸(垂直方向)縮放元素。
基點(diǎn)一樣在元素的中心位置??梢酝ㄟ^(guò)transform-origin來(lái)改變基點(diǎn)。
transform:scaleY(2);
看看兼容性寫法:
zoom和scale的區(qū)別
zoom和scale這兩個(gè)東西都是用于對(duì)元素的縮放,但兩者除了兼容性之外還有一些不同的地方。zoom縮放會(huì)將元素保持在左上角,而scale默認(rèn)是中間位置,可以通過(guò)transform-origin來(lái)設(shè)置。另外他們執(zhí)行的渲染順序也不同zoom可能影響到盒子的計(jì)算。
運(yùn)行<!DOCTYPE html>
新聞熱點(diǎn)
疑難解答
圖片精選