Card Flip (カードフリップ)

要素がY軸を中心に1回転しながら、少し手前に近づいて元に戻ります。

[適用する場所]にフリップ(Flip)のアニメーションを追加してください。
要素が縦軸を中心に1回転しながら少し手前に近づき、わずかに小さくなってから元に戻るようにしてください。生き生きと、でも短く。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ループではなく一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を省いてください。

要素が横軸または縦軸を中心に3D回転し、真横を向いた状態から正面を向きます。

[適用する場所]にフリップイン(Flip In)の登場アニメーションを追加してください。フリップインX(flip in X)、フリップインY(flip in Y)とも呼ばれます。
要素が真横を向いた状態から横軸を中心に回転して正面を向き、少し行き過ぎて戻ってから落ち着くようにしてください。素早く、小さな揺れを伴って。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで正面を向いた状態で表示してください。

文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。

[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。

コンテンツを載せた立方体が回転し、次の面を見せます。

[適用する場所]にキューブローテート(Cube Rotate)のトランジションを追加してください。3Dキューブ(3D cube)、キューブトランジション(cube transition)とも呼ばれます。
遠近感のある立方体の側面にコンテンツを配置し、「次へ」を押すたびに立方体が縦軸を中心になめらかに回って次の面が正面に来るようにしてください。
キーボードとスクリーンリーダーが届くのは正面の面だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はシンプルなフェードにしてください。

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

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

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

[適用する場所]にカバーフロー(Coverflow)カルーセルを追加してください。カバーフローカルーセル(cover flow carousel)とも呼ばれます。
中央のアイテムは正面を向き、両側のアイテムは奥へ向きを変えて並ぶようにしてください。横にドラッグすると列が動き、離すといちばん近いアイテムになめらかに止まるようにしてください。
ドラッグに加えて矢印キーとスワイプにも対応し、タッチ端末でもページの縦スクロールができるようにしてください。