3D チルトカード

解説

3D チルトカードは、マウスの位置に合わせてカードが立体的に傾く、インタラクティブな演出です。この実装は CSS と JavaScript の組み合わせ。親要素に perspective:800px を与えて奥行きの基準を作り、mousemove イベントでカーソルがカード内のどこにあるかを割合で求めます。その値を rotateX と rotateY に渡し、傾きをリアルタイムに反映。マウスが離れると mouseleave で回転をゼロに戻し、水平に復帰します。transition:transform .1s でわずかに遅らせ、動きをなめらかにしています。

向いている場面

• 注目させたい商品カードやヒーロー要素
• ポートフォリオの作品サムネイル
• 遊び心を出したいランディングページ

傾きの強さは JavaScript の 18 という倍率で、奥行き感は perspective の値で調整します。マウス前提の演出のためタッチ端末では傾きませんが、なくても見た目は崩れません。多くのカードに一斉に効かせると重くなることがあるので、対象は絞るのがおすすめです。動きを抑えたい利用者には prefers-reduced-motion で無効化すると配慮になります。

使用例・適したシーン

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