CSS中的zoom屬性和scale屬性的用法及區別

2021-07-26 16:58:16 字數 547 閱讀 1474

css中的zoom屬性和scale屬性的用法及區別------------scale屬性

scale屬性的取值為2個,它本身其實相當於乙個函式,因為它的寫法就和函式一樣:

scale();

scale(x);

scale(x,y);

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

x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數

y是乙個可選引數,沒有設定的話,則表示x,y兩個方向的縮放倍數是一樣的。並以x為準。

transform:scale(2,2.5);

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

預設值是1,基點一樣在元素的中心位置。可以通過transform-origin來改變基點

transform:scalex(2);

3、scaley() 元素只在y軸(垂直方向)縮放元素

基點一樣在元素的中心位置。可

transform:scaley(2);

看看相容性寫法:

css code複製內容到剪貼簿

.test

CSS中zoom和scale的區別

zoom和scale這兩個東西都是用於對元素的縮放,但兩者除了相容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角,而scale預設是中間位置,可以通過transform origin來設定。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。執行 style webkit tran...

CSS中zoom和scale的區別

zoom和scale這兩個東西都是用於對元素的縮放,但兩者除了相容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角,而scale預設是中間位置,可以通過transform origin來設定。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。執行 第乙個測試中只設定了scale,於...

CSS中Zoom屬性的一些介紹

這裡我們介紹一下 css中的zoom屬性,這個屬性一般不為人知,甚至有些css手冊中都查詢不到。其實zoom屬性是ie瀏覽器的專有屬性,firefox 等瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的h aslayout屬性,清除 浮動 清除margin...