scale関数

関数scaleは要素を拡大縮小します：何倍かに拡大または縮小します。拡大縮小は、プロパティtransform-origin で指定される点を中心に行われます。

1つまたは2つのパラメータをカンマ区切りで受け取ります。パラメータが2つの場合、1つ目のパラメータは水平方向の拡大縮小を、 2つ目のパラメータは垂直方向の拡大縮小を設定します。パラメータが1つの場合、水平方向と垂直方向の両方を同時に拡大縮小します。

パラメータの値は整数または小数です。値が1より大きい場合、要素は拡大され、小さい場合（例：0.5）は要素は縮小されます。 1を指定すると何も変化しません（これがデフォルト値です）。

構文

cssセレクタ {
  transform: scale(1つまたは2つの数値);
}

ブロックにホバーした時に両軸を1.5倍に拡大します：

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

両軸を2分の1に縮小します：

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

X軸を2倍に拡大します：

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Y軸を2倍に拡大します：

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат: