tilt(3D傾き) — 動きの伝え方辞典

hover

tilt / 3d tilt card

tilt(3D傾き)

カーソル位置に応じてカードが3Dに傾く動き。perspectiveの奥行きとあわせて、平面のUIに物理的な立体感を与える。サムネイルやプロダクトカードで頻出。

01 — Demo video

Play live →

02 — Prompt template

カードに tilt(3D傾き)を実装してください。

- カーソルのカード内での位置を -1〜1 に正規化し、rotateX / rotateY にマッピングする
- 最大回転角は {{maxAngle}}deg、perspective は {{perspective}}px
- ホバー中はカードを scale {{scale}} でわずかに拡大する
- 回転は毎フレーム lerp で補間し、カクつかせない
- mouseleave 時は回転と拡大をなめらかに 0 に戻す
- prefers-reduced-motion 時は傾きを無効化する

カードに tilt(3D傾き)を実装してください。

- カーソルのカード内での位置を -1〜1 に正規化し、rotateX / rotateY にマッピングする
- 最大回転角は {{maxAngle}}deg、perspective は {{perspective}}px
- ホバー中はカードを scale {{scale}} でわずかに拡大する
- 回転は毎フレーム lerp で補間し、カクつかせない
- mouseleave 時は回転と拡大をなめらかに 0 に戻す
- prefers-reduced-motion 時は傾きを無効化する

カードに tilt(3D傾き)を実装してください。

- カーソルのカード内での位置を -1〜1 に正規化し、rotateX / rotateY にマッピングする
- 最大回転角は {{maxAngle}}deg、perspective は {{perspective}}px
- ホバー中はカードを scale {{scale}} でわずかに拡大する
- 回転は毎フレーム lerp で補間し、カクつかせない
- mouseleave 時は回転と拡大をなめらかに 0 に戻す
- prefers-reduced-motion 時は傾きを無効化する

03 — Params

maxAngle(最大傾き deg) — 範囲 2〜30 / 初期 12
端にカーソルを置いたときの最大回転角。10前後が上品、20を超えると玩具っぽい。
perspective(奥行き px) — 範囲 300〜2000 / 初期 800
小さいほど遠近が強調されて大げさに傾いて見える。
scale(ホバー時の拡大) — 範囲 1〜1.15 / 初期 1.04
傾きと同時にわずかに拡大すると「持ち上がる」印象になる。

04 — Vocab

perspective — 3D変形の視点距離。値が小さいほどカメラが近く、遠近感が誇張される。
rotateX / rotateY — X軸回転は上下の傾き、Y軸回転は左右の傾き。カーソルのY位置→rotateX、X位置→rotateYに対応させる。
正規化(normalize) — カーソル位置を-1〜1の割合に変換する処理。要素のサイズが変わっても同じ傾き方になる。
translateZ — カード内の要素を手前に浮かせる指定。テキストだけ浮かせると多層の立体感が出る。

05 — NG → OK examples

言い方: 「「カードをマウスでぐりぐり動くようにして」」

なぜNG: 「ぐりぐり」が回転なのか移動なのか不明。回転軸・最大角・奥行きが未定義だと、傾きすぎて読めないカードや、逆にほぼ動かない実装になる。

言い方: 「「tiltを実装。カーソル位置を正規化してrotateX/rotateYへマッピング、maxAngleとperspectiveは数値指定、leaveで0に戻す」」

なぜOK: マッピング方式と数値、終了時の挙動まで揃っている。tiltという名前だけで実装パターンが一意に伝わる。