ホバー3Dチルトカード

解説

マウスの位置に合わせてカードが立体的に傾く3Dチルトカードです。親要素に perspective を与えて奥行きを作り、JavaScript で mousemove のカーソル座標を取得し、カード中央からのずれを角度へ変換して rotateX と rotateY を適用します。同時にカード上の光沢を radial-gradient で描き、CSS 変数 --mx --my でハイライト位置をカーソルに追従させ、ガラスのような反射を演出しています。

活躍する場面

• サービスやプランを並べた特集カード
• ポートフォリオや作品のサムネイル
• 注目させたい単独のヒーローカード

傾きの強さは座標に掛ける角度（このサンプルでは20度）で調整でき、値を下げると上品な動きになります。マウスが離れると transform をリセットして水平に戻ります。注意点として、傾けすぎると文字が読みにくくなります。またこの効果はポインタ操作が前提のため、タッチ端末では発火しません。動きを控えたいユーザー向けに prefers-reduced-motion での無効化も検討してください。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調