Tilt
チルト
どんな動き？
カード上でのカーソル位置を検知し、perspectiveをかけたカードをX軸・Y軸方向に傾けることで立体的なホバー効果を生むアニメーション。カーソルが動くたびに傾きが追従し、カードが手元で回転しているかのような質感を演出できる。プロダクトカードやプロフィールカードのリッチな見せ方として使われる。
よく使う場所
プロダクトカードプロフィールカード画像カード
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Tilt a card in 3D on the X and Y axes based on the cursor position within it.Trigger:
mousemove over the card (hover).
Initial state:
rotateX: 0deg
rotateY: 0deg
Animation:
The card rotates on the X and Y axes proportional to the cursor's offset from the card's center, with a perspective applied to the parent for a 3D effect.
Final state:
On mouse leave, rotation eases back to rotateX: 0, rotateY: 0.
Timing:
duration: 0.15–0.3s per update, easing: ease-out.実装方法の候補
この動きは以下の技術で実装できます。
JavaScript (mousemove + rotateX/rotateY)CSS perspective
別名・関連ワード
3D TiltTilt HoverCard Tilt Effect