ShowMotion

3D & Depth

3D Tilt (3Dチルト)

別名 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt

カードがポインターの方向へ立体的に傾き、重なった中身が表面から浮き上がります。

使いどころ

製品カード、料金カード

バリエーション

  • tilt only
  • tilt with glare
  • layered translateZ children
  • 3D Card Effect
  • vanilla-tilt
  • Reverse tilt

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]に3Dチルト(3D Tilt)エフェクトを追加してください。パースペクティブチルト(perspective tilt)、チルトカード(tilt card)とも呼ばれます。
ポインターの動きに合わせてカードがその方向へ立体的に傾き、内側のレイヤーがそれぞれ違う深さで表面から浮き上がり、ポインターが離れたらなめらかに平らへ戻るようにしてください。なめらかで控えめに。
文字が読みやすいよう傾きは小さくし、タッチ端末とユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はカードを平らなままにしてください。

似ているモーション

Wobble Card (ウォブルカード)

カード上のポインターの動きに合わせて、カードがわずかに移動・拡大します。

使いどころ

プロモーションカード

Glare / Holographic Card (グレア/ホログラフィックカード)

別名 Glare hover, Glare card, Magic card, Glare

明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。

使いどころ

プレミアムカード、コレクションカード

3D Pin (3Dピン)

別名 Pin hover 3D

ホバーするとカードが奥へ傾き、ピンと光がこちらへ浮かび上がります。

使いどころ

リンクプレビューカード

Text Tilt (テキストチルト)

別名 Perspective Text Tilt

テキストがマウスの位置を追って3Dパースペクティブで傾きます。

使いどころ

ヒーロー見出し

Card Flip (カードフリップ)

別名 Flip card, Card flip 3D, 3D flip on hover

カードが軸を中心に半回転し、裏面を見せます。

使いどころ

チーム紹介カード、単語カード、料金の詳細

Card Stack (カードスタック)

別名 Stacked cards, Cards effect

カードが少しずつずれて重なり、一番上のカードがどいて次のカードが現れます。

使いどころ

お客様の声、スワイプ式カード

Coverflow (カバーフロー)

別名 Cover flow carousel

中央のアイテムは正面を向き、両側のアイテムは奥へ角度をつけて並びます。

使いどころ

アルバム、メディアのカルーセル

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。