CSS中zoom屬性和scale屬性有什么區(qū)別

發(fā)布時(shí)間：2021-04-01 16:18:23 來(lái)源：億速云閱讀：379 作者：Leah 欄目：web開(kāi)發(fā)

CSS中zoom屬性和scale屬性有什么區(qū)別？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

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)樗膶?xiě)法就和函數(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);
看看兼容性寫(xiě)法：

CSS Code復(fù)制內(nèi)容到剪貼板

.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;
}

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>

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
div {
width:300px;height:100px;
border:1px solid #CCC;
font-size:0px;
line-height:100px;
margin:10px;
}
span {
display:inline-block;
height:80px;width:200px;background:#F5F5F5;
vertical-align:middle;
overflow:hidden;
}
</style>
<div>
<span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
<span style="
-webkit-transform-origin:top left;
-webkit-transform:scale(0.5);
"></span>
</div>
<div>
<span style="zoom:0.5;"></span>
</div>

CSS中zoom屬性和scale屬性有什么區(qū)別

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

CSS中zoom屬性和scale屬性有什么區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽