拡大・回転・移動で見た目を変えるtransform

transitionで「なめらかに変化させる」仕組みがわかりました。今回は、何を変化させるかの選択肢を増やします。主役はtransformです。

scale()：拡大・縮小する

<div class="icon">🐤</div>

.icon {
  transform: scale(1.2);
}

1がもとの大きさ。1.2なら1.2倍、0.8なら0.8倍になります。

rotate()：回転する

<div class="icon">⭐</div>

.icon {
  transform: rotate(15deg);
}

deg（度）で角度を指定します。プラスは時計回り、マイナスは反時計回り。

translate()：移動する

<button class="btn">おくる</button>

.btn:hover {
  transform: translateY(-6px);
}

translateX()は横、translateY()は縦の移動。数字がマイナスだと上・左、プラスだと下・右に動きます。ボタンが「ふわっと持ち上がる」演出でよく使われます。横と縦を同時に動かすなら、translate(10px, -6px)のようにカンマ区切りで2つ書けます（横・縦の順）。

組み合わせて使える

scale()・rotate()・translate()は、スペースで区切ると同時に使えます。

<div class="icon">🐤</div>

.icon:hover {
  transform: scale(1.1) rotate(5deg) translateY(-2px);
}

transformはまわりを押しのけない

transformにはもう1つ大切な性質があります。どれだけ動かしても、まわりの要素のレイアウトに影響しないのです。

widthを大きくすると、隣の要素が押し出されてレイアウト全体がガタつきます。でもtransform: scale(1.3)なら、見た目は1.3倍でもまわりから見た場所と大きさは元のまま。カードがふわっと拡大しても、隣のカードがずれないのはこのおかげです。

変形の軸を変えるtransform-origin

この軸はtransform-originで変えられます。たとえば時計の針のように根元を軸に回したいときは、こう書きます。

<div class="hand"></div>

.hand {
  transform-origin: bottom center;
  transform: rotate(45deg);
}

bottom center（下辺のまん中）を軸に回転するので、針が根元から振れる動きになります。まずは「既定はまん中、変えたければtransform-origin」と覚えておけば十分です。

このレッスンのまとめ

1. transform＝大きさ・角度・位置を変えるプロパティ
2. scale()拡大縮小・rotate()回転・translate()移動
3. スペース区切りで複数を同時に指定できる
4. transitionと組み合わせて使うのが定番