CSS scale 属性

定義と使用方法

scale 属性は、要素のサイズを変更することができます。

scale 属性は、要素がx、yの方向に拡大する割合を定義します。z方向の拡大率も定義できます。

拡大値は1つの値、2つの値、または3つの値で指定できます。

• 1つの値が指定されている場合、要素はx、yの方向に同じ割合で拡大します。
• 2つの値が指定されている場合、要素はx、yの方向に指定された割合で拡大します。
• 3つの値が指定されている場合、要素はx、y、zの方向に指定された割合で拡大します。

よりよく理解するために scale 属性については、参照してくださいデモ。

注意：要素を拡大するもう一つの技術は、 CSS scale() 函数 の CSS transform 属性。このウェブページで説明する CSS scale 属性は、要素を拡大するよりシンプルで直接的な方法です。

インスタンス

例1

要素のサイズを変更する：

div {
  scale: 2;
}

実際に試してみてください

例2

次の場合 scale 属性が2つの値に設定されている場合、x軸とy軸上にそれぞれのサイズを設定します。ここでは、要素のx軸上のサイズが2倍、y軸上のサイズが半分に変更されます：

div {
  scale: 2 50%;
}

実際に試してみてください

CSS 语法

scale: x-axis y-axis z-axis|初期値|継承;

属性値

技術的な詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

教程：CSS 2D 変換

教程：CSS 3D 変換

参考：CSS rotate 属性

参考：CSS translate 属性