CSSホバー時のScale Transform効果

ホバーエフェクトのScale Transform

ホバー時の要素スケーリングは、Web上で最も一般的なインタラクティブエフェクトの一つです。クリック可能なカード、画像、ボタンに注目を集める満足感のあるズームイン効果を作成します。

CSS

.card {
  transform: scaleX(1) scaleY(1);
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: scaleX(1.05) scaleY(1.05);
}

スケール値の解説

値	効果
1	元のサイズ（100%）
1.05	5%拡大 — 控えめ、プロフェッショナル
1.1	10%拡大 — 目立つ、遊び心
1.5	50%拡大 — ドラマチック
0.95	5%縮小 — 押下/アクティブ状態
0	非表示（点に収縮）

独立した軸スケーリング

各軸を個別にスケーリングできます：

.stretch-x {
  transform: scaleX(1.2) scaleY(1);  /* 幅広く、高さは同じ */
}
.stretch-y {
  transform: scaleX(1) scaleY(1.3);  /* 高く、幅は同じ */
}

パフォーマンス

Scale transformはGPUで合成されるため、サイズ変更をアニメーションする最もパフォーマンスの良い方法の一つです。widthやheightの変更とは異なり、スケーリングは周囲の要素のレイアウト再計算やリペイントを発生させません。