3D ティルト カード（JS）
マウスの位置に合わせてカードが立体的に傾く、わずかな Vanilla JavaScript による 3D ティルトです。親に perspective で奥行きを与え、内側に transform-style: preserve-3d を指定。
解説
マウスの位置に合わせてカードが立体的に傾く、わずかな Vanilla JavaScript による 3D ティルトです。親に perspective で奥行きを与え、内側に transform-style: preserve-3d を指定。mousemove でカード上のカーソル座標を取得し、中心からのずれ（-0.5 から 0.5）を計算して、その値に応じて rotateY と rotateX を当てています。右に動かせば右へ、上に動かせば上へ向く自然な追従で、mouseleave で傾きをリセットして水平に戻ります。transition を 0.15 秒と短めにし、機敏かつカクつかない手触りです。
向いている場面
- プロダクトやアプリのショーケース・ヒーロー要素
- 注目させたいバナーや特集カード
- ポートフォリオで作品サムネに遊び心を加えたいとき
傾きの強さは JS 内の係数（x*20 や -y*20 の 20）を上下させるだけで調整でき、小さくすると上品に、大きくすると派手になります。rotateX 側の符号を反転しているのは、上にカーソルがあるとき上端が手前に来る直感的な向きにするためです。ホバー前提なのでタッチ端末では動かず、動きに敏感な利用者のために prefers-reduced-motion でティルトを無効化する分岐を入れておくと安心です。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
傾く角度をもっと控えめにできますか？
JavaScript の中で rotateY と rotateX に掛けている係数（サンプルでは 20）を小さくすると、傾きが浅くなって上品な印象になります。逆に大きくすると派手に傾きます。10 前後にすると、さりげない立体感に落ち着きます。
スマホのタッチでも動きますか？
このサンプルはマウスの移動を前提にしているため、タッチ端末では傾きません。スマホでも動かしたい場合は、端末の傾きを取る別の仕組みが必要になります。スマホでは静的なカードとして見せ、PC のみ演出を効かせる使い分けが現実的です。