未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】transform:scale()を使って要素を拡大・縮小する方法

本記事では要素を拡大・縮小させることができるtransform:scale()の使い方について解説しています。

よくブログなどでサムネイルにマウスを乗せた時に画像が拡大されるものを見かけますよね。実はあのアニメーションはtransform:scale()を使って実装されています。

transform:scale()を使えるようになると、実装できるアニメーションが増えたりより美しい・迫力のあるアニメーションが実装できるようになるので、頑張って習得しましょう。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

サンプルコード

以降の解説で実際にscale()を使って要素の拡大・縮小を解説していきます。自分のパソコンでコードを入力しながら確認したい方は以下のサンプルコードを使用してください。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="rect1"></div>
      <div id="rect2"></div>
    </div>
  </body>
</html>
CSS
#container {
  margin-top: 300px;
  text-align: center;
}

#rect1 {
  margin-right: 100px;
}

#rect1,
#rect2 {
  display: inline-block;
  width: 250px;
  height: 250px;
  background: linear-gradient(
    -45deg,
    rgba(246, 255, 0, 0.8),
    rgba(255, 0, 161, 0.8)
  );
}
サンプルコードの表示結果
サンプルコードの表示結果

250pxの正方形が2つ表示されるのが確認できます。左側(#rect1)にはscale()を適用させずに右側(#rect2)にだけscale()を適用させ比較していきます。

transform:scale()の使い方

transform:scale()の使い方は、()内に要素を拡大・縮小させたい倍率を記述します。第一引数に横(X軸)の倍率を指定し、第二引数に縦(Y軸)の倍率を指定します。

縦横同じ倍率で拡大・縮小させたい場合は、引数は一つだけ設定します。

▼要素を1.5倍に拡大させる

CSS
#rect2 {
  transform: scale(1.5);
}
scale(1.5)の表示結果
scale(1.5)の表示結果

▼要素を0.5倍に縮小させる

CSS
#rect2 {
  transform: scale(0.5);
}
scale(0.5)の表示結果
scale(0.5)の表示結果

▼要素の横を1.5倍拡大、縦を0.5倍縮小させる

CSS
#rect2 {
  transform: scale(1.5, 0.5);
}
scale(1.5,0.5)の表示結果
scale(1.5,0.5)の表示結果

▼要素の横を0.5倍縮小、縦を1.5倍拡大させる

CSS
#rect2 {
  transform: scale(0.5, 1.5);
}
scale(0.5,1.5)の表示結果
scale(0.5,1.5)の表示結果

transform:scaleX()

transform:scaleX()は、横(X軸)だけを拡大・縮小させたい時に使います。使い方は、()内に拡大・縮小させたい倍率を指定します。

▼要素の横を1.5倍に拡大させる

CSS
#rect2 {
  transform: scaleX(1.5);
}
scaleX(1.5)の表示結果
scaleX(1.5)の表示結果

▼要素の横を0.5倍に縮小させる

CSS
#rect2 {
  transform: scaleX(0.5);
}
scaleX(0.5)の表示結果
scaleX(0.5)の表示結果

transform:scaleY()

transform:scaleY()は、縦(Y軸)だけを拡大・縮小させたい時に使います。使い方は、scaleY()と同様に()内に拡大・縮小させたい倍率を指定します。

▼要素の縦を1.5倍に拡大させる

CSS
#rect2 {
  transform: scaleY(1.5);
}
scaleY(1.5)の表示結果
scaleY(1.5)の表示結果

▼要素の縦を0.5倍に縮小させる

CSS
#rect2 {
  transform: scaleY(0.5);
}
scaleY(0.5)の表示結果
scaleY(0.5)の表示結果