3D Pin (3Dピン)

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

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

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

[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。

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

[適用する場所]にカードフリップ(Card Flip)エフェクトを追加してください。フリップカード(flip card)、カードフリップ3D(card flip 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが縦軸を中心に立体的に裏返って裏面を見せ、離れたら元に戻るようにしてください。なめらかに、一定の速さで。
各面の裏側は隠して表裏が透けて重ならないようにし、キーボードフォーカスやタッチ端末のタップでも裏返るようにしてください。

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

[適用する場所]にカードスタック(Card Stack)を追加してください。スタックドカード(stacked cards)とも呼ばれます。
カードを少しずつずらして後ろへ重ね、押すたびに一番上のカードが横へ振れて一番後ろに回り込み、残りのカードが一段前に出るようにしてください。なめらかで、軽く素早い感じで。
キーボードで操作できるようにし、スクリーンリーダーが順番にすべてのカードに届くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。