3D Carousel
Auch genannt Rotating ring carousel
Im Ring angeordnete Panels drehen sich im 3D-Raum um eine senkrechte Achse.
Einsatz
Galerien und Produktpräsentationen
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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.Ähnliche Animationen
ABCDE
Ziehen
Coverflow
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.A
B
C
Klicken
Carousel Slide
Auch genannt Slider, Swipe carousel, Scroll-snap carousel
Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.
Einsatz
Hero-Banner, Produktgalerien
Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.ABCD
Klicken
Cube Rotate
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.Mehr aus 3D & Depth
3D Globe
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).A
Mit der Maus darüberfahren
3D Pin
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.A
Zeiger hier bewegen
3D Tilt
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.