3Dチルトカード
カーソルの位置に合わせてカードが立体的に傾く。カード周辺の広い範囲で反応するので、離れた場所からでも動く。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ポートフォリオ・製品カードの見せ場
- カーソル操作が主のPC向けヒーロー
- 1〜数枚のカードに存在感を出す
- 避ける場面
- 一覧に大量に並べる（酔いと負荷）
- スクロールを奪えない場所（touch-action:none）
- 文字が主体で読みづらくなるカード
- 構成要素
- 反応エリア
- カード
- 浮き上がる内容
- 持っている状態
- 通常
- ホバー
- キーボード
マウス・タッチ専用（ポインタ追従）。代替: 装飾のため操作の代替は不要
- 支援技術
傾きは装飾で内容に影響しない。reduced-motion では回転を止めて平らなまま。反応エリアは touch-action:pan-y で縦スクロールをブラウザに残す
- 動き
transform 0.2s ease-out で最大 ±14°×距離減衰の 3D 回転。カーソル位置への追従。reduced-motion では無し
原則フィッツの法則
デザインの要点
- 反応エリアはカードの 2.6 倍まで広げ、距離で減衰させる。カード上だけで反応すると、乗った瞬間に最大角へ跳ねる
- 回転は ±14° まで。それ以上傾けると文字が歪んで読めず、カードの縁が背景から浮きすぎる
- 中身は translateZ(40px) で手前に出す。preserve-3d が無いと、傾けても中身が平面に貼り付いたままになる
- 離れたら 0° へ戻す。傾いたまま残るカードは、次に乗ったとき前回の角度から跳ねる
コード（コピーして使えます）
<div class="tilt-stage">
<div class="tilt-card">
<div class="tilt-inner">この辺りで<br>動かしてみて</div>
</div>
</div>