scale関数

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

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

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

構文

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

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

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

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

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

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

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

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

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

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

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

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

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