LINEで現役エンジニアに直接質問してみよう!登録無料

CSS transform:scale()の使い方・書き方!要素を拡大・縮小させる方法

要素をまるごと拡大縮小すたい場合はありませんか? ボタンが要素に乗った時に、要素を大きくしたい場合や、アニメーションを組み合わせて表現する場合に使用します。

transform:scaleとは?

「transform」というCSSに馴染みがない人がほとんどなのでは無いかと思います。このtransformは「変形」という意味で、名前の通りCSSを使って要素を変形することが出来ます。

変形とは、

  • 回転(rotate)
  • 拡大、縮小(scale)
  • 移動(translate)
  • 歪み(skew)

の4つを表します。

その中でも、今回は「拡大、縮小(scale)」について解説していこうと思います。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

transformの基礎知識

transformについて学習する前に、理解しておきたい基礎知識があります。それは、transformは3次元の方向で制御出来るという点です。

どういうことかというと、今あなたが見ている画面には縦軸(x軸)方向と横軸(y軸)方向のの2種類があります。更に、画面には見えませんが奥行き(z軸)があります。

これらの頂点は、常に左上です。画面の下の方に行くにしたがって、移動量が大きくなります。

transform:scale()の書き方・使用例

transformを使うには、このように書きます。

〇〇 {
  transform: 関数名(値);
}

関数名には、下記を使うことが出来ます。

  • scaleX(x軸): X軸の拡大、縮小を設定できます
  • scaleY(y軸): Y軸の拡大、縮小を設定できます
  • scale(x軸, y軸): X軸、Y軸の2つの拡大、縮小を設定できます
  • scaleZ(): Z軸の拡大、縮小を設定できます(単体ではZ軸方向の拡大、縮小は実現しません)
  • scale3d(): X軸、Y軸、Z軸の拡大、縮小を一括で設定できま

更に、値に使うことが出来るのは01.01など整数や少数を使います。例えば、0はサイズを0%へ縮小する。1.23だとサイズを123%拡大する。という感じになります。

例えば、scaleX(x軸)を使って、x軸方向に要素を拡大させたい場合はこのように書きます。

.elem {
  transform: scaleX(0.5);
}

この場合は、.elemの要素をx軸方向に50%に縮小させる。というい意味になります。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。