Auch genannt Rotating ring carousel
Im Ring angeordnete Panels drehen sich im 3D-Raum um eine senkrechte Achse.
Einsatz
Galerien und Produktpräsentationen
Füge bei [wo] ein „3D Carousel“ hinzu (auch rotating ring carousel genannt).
Ordne die Panels in einem perspektivisch gesehenen Ring an; jeder Klick auf Weiter soll den ganzen Ring sanft um seine senkrechte Achse drehen und das nächste Panel nach vorn holen.
Mach die Steuerung per Tastatur erreichbar, sag Screenreadern das aktuelle Panel an und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.
Auch genannt Interactive globe
Eine rotierende 3D-Erde mit Markern oder Bögen sitzt im Layout.
Einsatz
Visuals für globale Reichweite
Füge bei [wo] einen „3D Globe“ hinzu (auch interactive globe genannt).
Ein Globus mit einigen Markern auf der Oberfläche soll sich langsam und gleichmäßig um seine Achse drehen, die Marker drehen sich mit: ruhig und fortlaufend.
Halte ihn dekorativ mit einer Textalternative für die gezeigten Informationen, pausiere ihn außerhalb des sichtbaren Bereichs und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).
Mit der Maus darüberfahren
Auch genannt Pin hover 3D
Eine Karte kippt beim Hovern perspektivisch nach hinten, während ein Pin mit Leuchten zum Betrachter aufsteigt.
Einsatz
Link-Vorschaukarten
Füge bei [wo] einen „3D Pin“-Hover-Effekt hinzu (auch pin hover 3D genannt).
Wenn der Zeiger über der Karte ist, soll sie perspektivisch nach hinten kippen, während ein Pin mit sanftem Leuchten am Fuß aus ihrer Mitte aufsteigt; beim Verlassen kehrt alles zurück: sanft, ohne Nachfedern.
Lass den Platz der Karte im Layout unverändert und zeige denselben Effekt beim Tastaturfokus.
Auch genannt Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
Eine Karte dreht sich perspektivisch zum Zeiger, und geschichtete Inhalte heben sich von der Oberfläche ab.
Einsatz
Produkt- und Preiskarten
Füge bei [wo] einen „3D Tilt“-Effekt hinzu (auch perspective tilt oder tilt card genannt).
Die Karte soll sich perspektivisch zum Zeiger neigen, während er sich bewegt, ihre inneren Ebenen heben sich in unterschiedlichen Tiefen ab, und beim Verlassen gleitet sie sanft zurück in die Ebene: weich und dezent.
Halte die Neigung sanft, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.
Mit der Maus darüberfahren
Auch genannt Flip card, Card flip 3D, 3D flip on hover
Eine Karte dreht sich um eine Achse halb herum und zeigt ihre Rückseite.
Einsatz
Teamkarten, Lernkarten, Preisdetails
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.
Auch genannt Stacked cards, Cards effect
Karten liegen leicht versetzt übereinander, und die oberste weicht zur Seite, um die nächste freizugeben.
Einsatz
Kundenstimmen, Swipe-Stapel
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.
Auch genannt Cover flow carousel
Das mittlere Element zeigt nach vorn, während die seitlichen perspektivisch weggedreht sind.
Einsatz
Album- und Medienkarussells
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.
Auch genannt 3D cube, Cube transition
Die Inhalte liegen auf den Seiten eines Würfels, der sich dreht, um die nächste Seite zu zeigen.
Einsatz
Slider-Übergänge, Feature-Umschalter
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.
Auch genannt Glare hover, Glare card, Magic card, Glare
Ein heller Glanzpunkt folgt dem Zeiger wie eine Spiegelung über die Kartenoberfläche.
Einsatz
Premium- oder Sammelkarten
Füge bei [wo] einen „Glare / Holographic Card“-Effekt hinzu (auch glare card oder glare hover genannt).
Ein weicher, heller Glanzpunkt soll dem Zeiger über die Kartenoberfläche folgen wie Licht, das sich darauf spiegelt, während sich die Karte leicht zum Zeiger neigt; beim Verlassen blendet beides aus: weich und dezent.
Lass Klicks durch die Glanzebene hindurch, halte den Inhalt darunter lesbar und zeige die Karte auf Touch-Geräten ohne Glanz.