CSSスケールトランスフォームトランジションによるズーム効果

スケールトランスフォームによるズーム効果

scale()トランスフォーム関数は、要素をその中心点から拡大または縮小します。CSSトランジションと組み合わせることで、スムーズなズームイン/ズームアウト効果を作成します。

CSSコード

.thumbnail {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}

.thumbnail:hover {
  transform: scale(1.05);
}

スケール値の理解

• scale(1) — 要素の元のサイズ（100%）
• scale(1.05) — 元より5%大きい
• scale(0.95) — 5%小さい（クリック/アクティブフィードバックに便利）
• scale(1.5) — 50%大きい（劇的なズーム）

transform-origin

デフォルトでは、スケーリングは要素の中心から行われます。transform-originで変更できます：

.thumbnail {
  transform-origin: top left;
  transition: transform 0.2s ease-in-out;
}

これにより、要素は左上隅からスケーリングされます。ツールチップやコンテキストメニューに便利です。

アクティブ状態のフィードバック

人気のパターンは、ホバーでのスケールアップとアクティブでのスケールダウンを組み合わせたボタンプレスフィードバックです：

.button {
  transition: transform 0.15s ease;
}
.button:hover {
  transform: scale(1.05);
}
.button:active {
  transform: scale(0.97);
}

パフォーマンス

すべてのtransformアニメーションと同様に、scale()はGPUアクセラレーションされます。レイアウトに影響しないため、対象の要素が視覚的に拡大・縮小しても周囲の要素はそのままの位置に留まります。