§16-12Motion

3D tilt card

マウスの位置に合わせてカードが立体的に傾く。

注目させたいカードに奥行きを与えて目を引く。ランディングページや作品一覧など、演出が許される場面に向く。

実装のポイント

親に perspective を与えて rotateX/rotateY をポインタ位置から算出し、mouseleave で 0 に戻す。pointermove を rAF で間引くと高頻度イベントでも描画が詰まらない。