Flip

Eine Karte dreht sich um eine Achse halb herum und zeigt ihre Rückseite.

Füge bei [wo] einen „Card Flip“-Effekt hinzu (auch flip card oder card flip 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie sich perspektivisch um ihre senkrechte Achse umdrehen und ihre Rückseite zeigen, beim Verlassen dreht sie sich zurück: weich und gleichmäßig.
Blende die Rückseite jeder Fläche aus, damit die beiden nie durcheinander durchscheinen, und lass das Umdrehen auch beim Tastaturfokus und per Tippen auf Touch-Geräten funktionieren.

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.

Das Element dreht sich in 3D, bis es auf der Kante steht und unsichtbar ist.

Füge bei [wo] eine „Flip Out“-Ausblendanimation hinzu (auch flip out X oder flip out Y genannt).
Das Element soll sich leicht nach hinten neigen und dann um seine senkrechte Achse drehen, bis es auf der Kante steht und verschwunden ist: schnell und knackig.
Gib ihm Perspektive, damit die Drehung als Tiefe wirkt, entferne das Element erst nach dem Ende der Drehung und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.

Das Element schwingt an einem Scharnier oben links herab, baumelt und fällt dann aus dem Bildschirm.

Füge bei [wo] eine „Hinge“-Ausblendanimation hinzu.
Das Element soll von seiner oberen linken Ecke herabschwingen, als hätte sich eine Schraube gelöst, hin und her baumeln und dann ausblendend aus dem Bildschirm fallen: langsam, komisch und bewusst.
Lass es über andere Inhalte fallen, ohne das Layout zu verschieben oder Scrollbalken zu erzeugen, entferne es nach dem Fallen und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.