3D ティルトカード
マウスの位置に合わせて立体的に傾く 3D カード。perspective と transform を組み合わせた、サービス紹介セクションに映える演出。
解説
3D ティルトカードは、カーソルの位置に応じてカードが立体的に傾くカードです。親要素に perspective:1000px を与えて奥行きの基準を作り、カード側は transform-style:preserve-3d で 3D 空間を保ちます。mousemove でカード内のカーソル座標を取り、上下位置を rotateX、左右位置を rotateY に変換して傾きを与えます。中身のパネルは translateZ(40px) で手前に浮かせてあるため、傾いたときにカードから少し飛び出して見え、立体感が強調されます。mouseleave で transform を戻し、短い transition でなめらかに水平へ復帰します。
映える使い方
- サービス紹介・特徴カードを並べたセクションのアクセント
- 料金プランや実績カードなど、触って楽しい一覧
- ポートフォリオのサムネイルカード
傾きの強さは JavaScript の角度係数（既定 20 と -20）で調整します。値を下げると上品に、上げると派手になります。浮き出し量は translateZ の 40px を増減して変えられます。注意点として、強い傾きは酔いや読みにくさにつながるため、文字情報が主のカードでは控えめにし、prefers-reduced-motion で効果を弱める配慮があると親切です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
傾く角度を弱めたいときはどこを変えますか
JavaScript内でrotateXとrotateYに掛けている±20の係数を小さくします。例えば±10にすると傾きが穏やかになります。中身の浮き出し量はCSSのtranslateZ(40px)の値で調整できます。
perspectiveはカードと親のどちらに付けますか
奥行きの基準となるperspectiveは親要素（このサンプルではbody）に付けます。カード側にはtransform-style:preserve-3dを付け、回転と浮き出しを担当させる役割分担になっています。