【CSS】transformでコンテンツを拡大・縮小させる方法

前回は、transform で、特定のコンテンツを回転させる方法を紹介しました。

【CSS】transformでコンテンツを回転させる方法

今回は、transform で、コンテンツを拡大・縮小させる方法を紹介します。

基本のコードは、以下になります。

コンテンツを拡大・縮小する

コンテンツを拡大・縮小させるには、transform: scale();を使用します。

カッコの中に、拡大・縮小したい倍率を指定します。

例えば、四角形を 2 倍に拡大したい場合、transform: scale(2);を設定します。

ブラウザで確認すると、

青い四角形が拡大されました。

反対に、四角形を 1/2 に縮小するには、transform: scale(0.5);を設定します。

青い四角形が縮小されました。

四角形を横に 2 倍、縦に 3 倍拡大したい場合は、transform: scale(2, 3);を設定します。

ブラウザで確認すると、

四角形が、指定した通り拡大されました。

コンテンツを横方向へ拡大・縮小する

コンテンツを横方向へ拡大・縮小させるには、transformでscaleX();を設定します。

例えば、四角形を横方向へ 1.5 倍拡大させるには、transform: scaleX(1.5);を設定します。

ブラウザで確認すると、

青い四角形が横方向へ 1.5 倍拡大されました。

コンテンツを縦方向へ拡大・縮小する

コンテンツを縦方向へ拡大・縮小させるには、transformでscaleY();を設定します。

例えば、四角形を縦方向へ 3 倍拡大させるには、transform: scaleY(3);を設定します。

ブラウザで確認すると、

青い四角形が縦方向へ 3 倍拡大されました。

アニメーションなどで使用することになりますので、ぜひ試してみてください。