CSS scale 屬性
定義和用法
scale 屬性允許您改變元素的大小。
scale 屬性定義了元素在 x 和 y 方向上的縮放比例。您也可以定義元素在 z 方向上的縮放比例。
Scale 值可以為一個、兩個或三個值。
- 如果給定一個值，則元素在 x 和 y 方向上按相同比例縮放。
- 如果給定兩個值，則元素在 x 和 y 方向上分別縮放。
- 如果給定三個值，則元素在 x、y 和 z 方向上分別縮放。
為了更好地理解 scale 屬性，請檢視演示。
注意： 縮放元素的另一種技術是使用 CSS transform 屬性和 CSS scale() 函式。本網頁解釋的 CSS scale 屬性，可以說是更簡單、更直接的縮放元素的方法。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 是的。 閱讀關於 animatable 的內容 試試看 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.scale="2 0.7" 試試看 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| scale | 104 | 104 | 72 | 14.1 | 90 |
CSS 語法
scale: x軸 y軸 z軸|initial|inherit;
屬性值
| 屬性值 | 描述 | 演示 |
|---|---|---|
| x-axis | 定義 x 軸的縮放因子。可能的值
|
演示 ❯ |
| y-axis | 定義 y 軸的縮放因子。可能的值
|
演示 ❯ |
| z 軸 | 定義 z 軸的縮放因子。可能的值
|
|
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
當 scale 屬性設定了兩個值時，大小分別設定在 x 軸和 y 軸上。這裡，元素在 x 軸上變為原來大小的兩倍，在 y 軸上變為原來大小的一半。
div {
scale: 2 50%;
}
自己動手試一試 »
相關頁面
CSS 教程： CSS 2D 變換
CSS 教程： CSS 3D 變換
CSS rotate 屬性：CSS Rotate 屬性
CSS translate 屬性：CSS Translate 屬性
