scale()
scale() CSS 函式定義了一種在二維平面上調整元素大小的變換。由於縮放量由一個向量 [sx, sy] 定義，因此可以以不同的比例調整水平和垂直尺寸。其結果是一個 <transform-function> 資料型別。
試一試
transform: scale(1);
transform: scale(0.7);
transform: scale(1.3, 0.4);
transform: scale(-0.5, 1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
此縮放變換由一個二維向量來描述。其座標定義了在每個方向上的縮放量。如果兩個座標相等，則縮放是均勻的（isotropic），並且元素的寬高比得以保留（這是一種位似變換）。
當座標值在 [-1, 1] 範圍之外時，元素會沿該維度放大；在此範圍內時，則會縮小。如果值為負，則會使元素在該維度上進行點反射。值為 1 時沒有效果。
備註： scale() 函式只在二維空間進行縮放。要在三維空間進行縮放，請改用 scale3d()。
語法
css
scale(sx)
scale(sx, sy)
值
sx-
一個
<number>或<percentage>，表示縮放向量的橫座標（水平，x 軸分量）。 sy可選-
一個
<number>或<percentage>，表示縮放向量的縱座標（垂直，y 軸分量）。如果未定義，其預設值為sx，從而實現保持元素寬高比的均勻縮放。
正式語法
<scale()> =
scale( <number> , <number>? )
無障礙
縮放/縮放動畫對無障礙性存在問題，因為它們是某些型別偏頭痛的常見誘因。如果需要在網站中包含此類動畫，應提供一個控制元件，允許使用者關閉動畫，最好是全站範圍的。
此外，可以考慮使用 prefers-reduced-motion 媒體特性——用它來編寫媒體查詢，以便在使用者系統偏好設定中指定了減弱動畫時關閉動畫。
瞭解更多
示例
同時縮放 X 和 Y 維度
HTML
html
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}
結果
分別縮放 X 和 Y 維度，並平移原點
HTML
html
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
transform-origin: left;
background-color: pink;
}
結果
規範
| 規範 |
|---|
| CSS 變換模組級別 1 # funcdef-transform-scale |
瀏覽器相容性
載入中…