CSS中的zoom屬性和scale屬性的用法及區(qū)別

CSS中的zoom屬性和scale屬性的用法及區(qū)別是什么呢?以下是小編整理的相關(guān)內(nèi)容，歡迎閱讀學(xué)習(xí)!

(資料圖片)

zoom 屬性

語法：

zoom：normal | |

默認值：normal

適用于：所有元素

繼承性：有

取值：

normal：

使用對象的實際尺寸。

：

用浮點數(shù)來定義縮放比例。不允許負值

：

用百分比來定義縮放比例。不允許負值

說明：

設(shè)置或檢索對象的縮放比例。

對應(yīng)的腳本特性為zoom。

Scale屬性

scale屬性的取值為2個，它本身其實相當(dāng)于一個函數(shù)，因為它的寫法就和函數(shù)一樣：

scale();

scale(x);

scale(x,y);

1、scale(x,y) 對元素進行縮放

X表示水平方向縮放的倍數(shù) Y表示垂直方向的縮放倍數(shù)

Y是一個可選參數(shù)，沒有設(shè)置的話，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。

transform:scale(2,2.5);

2、scaleX() 元素只在X軸(水平方向)縮放元素。

默認值是1，基點一樣在元素的.中心位置?？梢酝ㄟ^transform-origin來改變基點

transform:scaleX(2);

3、scaleY() 元素只在Y軸(垂直方向)縮放元素。

基點一樣在元素的中心位置?？梢酝ㄟ^transform-origin來改變基點。

transform:scaleY(2);

看看兼容性寫法：

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這兩個東西都是用于對元素的縮放，但兩者除了兼容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale默認是中間位置，可以通過transform-origin來設(shè)置。另外他們執(zhí)行的渲染順序也不同zoom可能影響到盒子的計算。

運行

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