拡大・回転・移動で見た目を変える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()は縦の移動。数字がマイナスだと上・左、プラスだと下・右に動きます。ボタンが「ふわっと持ち上がる」演出でよく使われます。

組み合わせて使える

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

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

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

このレッスンのまとめ

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