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

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

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

<div class="box box-1"></div>
<div class="box box-2"></div>
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);を設定します。

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

ブラウザで確認すると、

image3

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

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

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

image4

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

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

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

ブラウザで確認すると、

image5

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

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

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

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

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

ブラウザで確認すると、

image6

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

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

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

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

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

ブラウザで確認すると、

image7

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

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

ブログ一覧