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

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

作成日:2021年07月05日
更新日:2021年07月08日

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

css-transform-rotate

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

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

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

html
<div class="box box-1"></div>
<div class="box box-2"></div>
css
body {
padding: 100px;
}
.box {
width: 200px;
height: 100px;
margin: 12px;
}
.box-1 {
background-color: blue;
}
.box-2 {
background-color: red;
}

image2

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

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

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

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

css
.box-1 {
background-color: blue;
transform: scale(2);
}

ブラウザで確認すると、

image3

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

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

css
.box-1 {
background-color: blue;
transform: scale(0.5);
}

image4

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

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

css
.box-1 {
background-color: blue;
transform: scale(2, 3);
}

ブラウザで確認すると、

image5

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

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

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

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

css
.box-1 {
background-color: blue;
transform: scaleX(1.5);
}

ブラウザで確認すると、

image6

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

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

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

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

html
.box-1 { background-color: blue; transform: scaleY(3); }

ブラウザで確認すると、

image7

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

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

© 2024あずきぱんウェブスタジオ