ホバー演出：transformと組み合わせる

前のレッスンで覚えた transition に、transform（トランスフォーム）を組み合わせると、ボタンが浮き上がったり、画像がふわっと大きくなったりする「ホバー演出」が作れます。サイトでよく見る演出の多くは、この組み合わせだけでできています。

transformでできること

transformは、要素を動かす・大きさを変える・回す・傾けるプロパティです。まわりのレイアウトを崩さずに見た目だけを変えるので、演出にぴったりです。

• translate(x, y)：移動する（例：translateY(-4px) で4px上へ）
• scale(倍率)：拡大・縮小する（例：scale(1.1) で1.1倍）
• rotate(角度)：回転する（例：rotate(45deg)）
• skew(角度)：傾ける

【ポイント】marginやtopで動かさない理由
margin-top などで動かすと、まわりの要素まで一緒にずれてガタつきます。transformは見た目だけを動かすので、まわりに影響せず、動きもなめらかです。

演出1：ボタンを浮き上がらせる

少し上に動かして、影を大きくすると「浮いた」ように見えます。transitionは元の要素に書くのを忘れずに。

.btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.btn:hover {
  transform: translateY(-4px);                 /* 4px上へ */
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);  /* 影を大きく */
}

演出2：カードの画像をズームする

画像だけを大きくして、はみ出た部分は枠で隠します。ポイントは 枠の側に overflow: hidden、:hoverはカード全体につけることです。

.card {
  overflow: hidden;            /* はみ出た部分を隠す */
}
.card img {
  transition: transform 0.4s ease-out;
}
.card:hover img {              /* カードに乗せたら、中の画像を拡大 */
  transform: scale(1.12);
}

なぜ .card:hover img と書くの？

img:hover だと、画像の上にマウスがあるときしか動きません。.card:hover img にすると、カードの文字の部分に乗せても画像が動くので、押せる範囲がわかりやすくなります。

演出3：アイコンを回転させる

.icon {
  transition: transform 0.4s ease-in-out;
}
.icon:hover {
  transform: rotate(180deg);
}

transformを2つ以上かけるとき

transformは1行にまとめて書きます。2行に分けると、後から書いた方で上書きされてしまいます。

/* × 後の行で上書きされ、拡大しか効かない */
.btn:hover {
  transform: translateY(-4px);
  transform: scale(1.05);
}

/* ○ スペースで区切って1行に */
.btn:hover {
  transform: translateY(-4px) scale(1.05);
}

まとめ

• ホバー演出は「transition＋transform」の組み合わせ
• 動かすなら translate、大きくするなら scale、回すなら rotate
• 画像ズームは、枠に overflow: hidden、:hover はカード全体に
• transformを重ねるときは1行にまとめる

次のレッスンでは、マウスを乗せなくても自動で動く @keyframes（キーフレーム）アニメーションを作ります。