【CSS】「tansform」プロパティの基本の使い方を紹介します！

こんにちは、Autumn(オータム)です。
今回はCSSプロパティ「transform」について解説していきます。
「transform」プロパティは指定要素に様々な変化を与えることができます。
その中でも、ここだけは押さえておきたい「transform」の使い方をご紹介します。

translate(x軸, y軸)

「transform」プロパティの中でも一番使われている関数値が「translate()」です。引数に動かす距離（x軸, y軸）を指定してあげるだけです。

実例で確認してみましょう。
スタートはおかっぱの男の子が左端にいる状態です。
[HTML]

では「transform」でX軸方向に400px、Y軸方向に100px動かします。
[CSS]

上記のように、無事男の子が移動しました！

rotate()

次は指定要素を回転させる「rotate()」です。引数には回転させる角度の数値を入力します。時計回りに45度回転させる場合は「45deg」、逆時計回りのときは「-45deg」と入力します。

時計回りに45度回転する場合
[CSS]

逆時計回りに45度回転する場合
[CSS]

scale()

指定要素を拡大・縮小させることもできます。そんなときは「scale()」を使います。X軸方向・Y軸方向それぞれ変化させるかを引数に指定します。

X軸に2倍・Y軸に0.5倍拡大する場合
[CSS]

X軸に0.8倍・Y軸に1.5倍拡大する場合
[CSS]

まとめ

最後に今回のポイントまとめです。

「transform」はCSSアニメーションを作成するときに使用したり、Javascriptと組み合わせて使ったり、応用できる幅が広いのでしっかり基本をマスターしておきましょう。

読んでいただき、ありがとうございました！