Card Flip

Das Element dreht sich einmal ganz um die Y-Achse und kommt dabei kurz leicht auf den Betrachter zu.

Füge bei [wo] eine „Flip“-Animation hinzu.
Das Element soll sich einmal ganz um seine senkrechte Achse drehen und dabei leicht auf den Betrachter zukommen, dann mit einem winzigen Einknicken der Größe zurückfinden: lebendig, aber kurz.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, spiele sie einmal statt in Schleife ab und lass die Drehung bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Element dreht sich in 3D um seine waagerechte oder senkrechte Achse von der Kante aus, bis es dem Betrachter zugewandt ist.

Füge bei [wo] eine „Flip In“-Einblendanimation hinzu (auch flip in X oder flip in Y genannt).
Das Element soll von der Kante aus starten und sich um seine waagerechte Achse zum Betrachter drehen, dabei leicht über das Ziel hinaus- und zurückschwingen, bevor es zur Ruhe kommt: schnell, mit kleinem Nachwackeln.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation nach vorn gerichtet an.

Buchstaben oder Wörter drehen sich in 3D um eine Achse und zeigen auf ihrer Rückseite den nächsten Text.

Füge bei [wo] einen „Text 3D Flip“-Hover-Effekt hinzu (auch 3D flip text reveal genannt).
Wenn der Zeiger über dem Text ist, soll jeder Buchstabe in 3D um seine waagerechte Achse kippen und auf seiner anderen Seite einen neuen Buchstaben zeigen, nacheinander in einer schnellen, weichen Welle, und zurückkippen, wenn der Zeiger den Text verlässt.
Halte die Textbox während des Kippens gleich groß und zeige denselben Effekt beim Tastaturfokus.

Die Inhalte liegen auf den Seiten eines Würfels, der sich dreht, um die nächste Seite zu zeigen.

Füge bei [wo] einen „Cube Rotate“-Übergang hinzu (auch 3D cube oder cube transition genannt).
Lege die Inhalte auf die Seitenflächen eines perspektivisch gesehenen Würfels; jeder Klick auf Weiter soll den Würfel sanft um seine senkrechte Achse drehen und die nächste Seite nach vorn holen.
Lass nur die vordere Seite für Tastatur und Screenreader erreichbar und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

Karten liegen leicht versetzt übereinander, und die oberste weicht zur Seite, um die nächste freizugeben.

Füge bei [wo] einen „Card Stack“ hinzu (auch stacked cards genannt).
Staple die Karten leicht versetzt hintereinander; jeder Klick soll die oberste Karte zur Seite schwingen und hinten einreihen, während die übrigen nachrücken: weich, leicht und flott.
Mach es per Tastatur bedienbar, lass Screenreader jede Karte der Reihe nach erreichen und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

Das mittlere Element zeigt nach vorn, während die seitlichen perspektivisch weggedreht sind.

Füge bei [wo] ein „Coverflow“-Karussell hinzu (auch cover flow carousel genannt).
Das mittlere Element soll nach vorn zeigen, während die Elemente an den Seiten perspektivisch wegdrehen; seitliches Ziehen verschiebt die Reihe, und beim Loslassen rastet sie sanft beim nächsten Element ein.
Unterstütze neben dem Ziehen auch Pfeiltasten und Wischen, und lass das vertikale Scrollen der Seite auf Touch-Geräten funktionieren.