Zum Inhalt springen
UI Kit
Accent

3D Effekte für Karten und Geräte

Geräte, Karten und Bühnen in echter CSS-Perspektive. Sie neigen sich zum Zeiger, drehen sich um, fächern auf und stapeln sich in die Tiefe, mit einem ruhigen Standbild für alle Besucher.

6 Components · 28 Variants
Kategorie wechseln

Tiefe, die auf den Zeiger antwortet

Eine 3D-Fläche gibt einer flachen Seite ein Objekt, das reagiert. Die sechs Components hier arbeiten mit echter CSS-Perspektive statt WebGL, Text bleibt markierbar, Links bleiben klickbar und die Seite bleibt leicht. Auf Touchscreens und bei reduzierter Bewegung ruhen sie in einem ruhigen Standbild, und der Tastaturfokus hebt sie genauso an wie der Zeiger.

„Gerät in 3D“ setzt deinen echten Inhalt in ein Telefon, Tablet, Laptop oder Browserfenster mit Kante und Rückseite, der Laptop klappt beim Hereinscrollen auf. Die Neigekarten neigen sich wie Glas zum Zeiger, für Features, Produkte, Porträts mit Folie, Tarife oder eine Eintrittskarte. Der „Kartenstapel in 3D“ ordnet Karten als Fächer, Stapel, Fensterkaskade, Ring oder Trommel, alles per Pfeiltasten bedienbar. Wendekarten drehen sich um, für Team, Mythos oder Fakt, Produkte, Zahlen oder einen Gutschein. Die isometrische Bühne hebt ein Produkt in seine Ebenen auseinander, die Tiefenebenen fächern ein Bild in benannte Schichten auf.

Nimm eine 3D-Fläche pro Bildschirm, als einziger Blickfang wirkt sie am stärksten. „Gerät in 3D“ und die isometrische Bühne tragen eine Produktgeschichte, Neige- und Wendekarten passen zu Rastern gleichwertiger Inhalte. Halte den wichtigen Text auf der Karte selbst, dann liest er sich auf einen Blick, bevor sich etwas bewegt.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

card-stack-3d

Kartenstapel in 3D

Karten in echter Tiefe, ein Fächer in der Hand, ein Stapel zum Austeilen, eine Kaskade aus Fenstern, ein drehender Ring und eine Trommel zum Durchblättern. Echtes HTML auf jeder Karte, Pfeiltasten überall, der Ring hält bei Hover und Fokus an.

Props und Details · Kartenstapel in 3D

Fächer in der HandNeu in 1.2

Karten als Fächer gehalten, nach hinten in den Raum gekippt. Die Karte unter Zeiger oder Fokus hebt sich heraus, der ganze Fächer neigt sich mit der Maus.

Stapel mit ZitatenNeu in 1.2

Zitate in der Tiefe gestapelt. Weiter schickt die vordere Karte nach unten weg, sie reiht sich hinten ein. Auch die Pfeiltasten teilen aus, ein Live-Bereich nennt die Karte.

Kaskade aus FensternNeu in 1.2

App-Fenster, die in den Raum kaskadieren. Eine Tab-Liste daneben holt eines nach vorn, die anderen treten zurück und verblassen.

Ring-KarussellNeu in 1.2

Karten auf einem Ring, der sich im Raum dreht, alle paar Sekunden einen Schritt, solange er zu sehen ist. Er hält bei Hover und Fokus, ein Pausenknopf hält ihn ganz an.

Trommel zum DurchblätternNeu in 1.2

Schritte auf einer Trommel, die sich nach oben dreht wie ein Karteikasten. Knöpfe, die Nummern und die Pfeiltasten bewegen sie, die Nachbarn bleiben im Blick.

device-3d

Gerät in 3D

Ein Telefon, Tablet, Laptop oder Browserfenster in echter CSS-Perspektive, mit Kante und Rückseite. Es ruht in einem Kamerawinkel, neigt sich zum Zeiger und schwebt sanft, solange es zu sehen ist, dein Inhalt bleibt darin bedienbar.

Props und Details · Gerät in 3D

Telefon neben dem TextNeu in 1.2

Ein Telefon, zum Text gedreht, mit sichtbarer Metallkante. Es folgt der Maus um wenige Grad und schwebt, solange es zu sehen ist.

Laptop, der sich öffnetNeu in 1.2

Ein Laptop mit Tastatur, von oben gesehen. Der Deckel öffnet sich am Scharnier, sobald der Laptop ins Bild scrollt, das Dashboard darin ist echt.

Tablet auf dem TischNeu in 1.2

Ein Tablet liegt schräg auf dem Tisch, mit sichtbarer Kante und breitem Schatten. Ruhig genug, um eine ganze Sektion daneben zu tragen.

Browserfenster im RaumNeu in 1.2

Ein Browserfenster mit schmaler Kante, nach links gedreht wie eine Glasscheibe. Die Seite darin rendert in Desktopbreite und bleibt klickbar.

KamerawinkelNeu in 1.2

Knöpfe unter dem Telefon drehen es in fünf Winkel, die Rückseite eingeschlossen. Eine Radiogruppe, die Pfeiltasten wechseln den Winkel.

flip-card

Wendekarten

Karten mit Vorder- und Rückseite, die sich in 3D umdrehen, per Hover, Klick, Tippen oder Tastatur. Die verdeckte Seite ist inert, beide Seiten teilen sich eine Zelle, nichts springt, und bei reduzierter Bewegung wird überblendet.

Props und Details · Wendekarten

Team zum UmdrehenNeu in 1.2

Porträts, die sich beim Hover zu einer kurzen Vorstellung mit Kontaktlink drehen. Tippen oder Enter dreht sie auch, Escape dreht zurück.

Mythos oder FaktNeu in 1.2

Fragen, die sich per Klick zu ihrer Antwort drehen, markiert als Mythos oder Fakt. Gut für Einwände, ein Quiz oder FAQ mit Spieltrieb.

Produkte mit DetailsNeu in 1.2

Ein Bild mit Name und Preis dreht sich zu seinen Details, einer kurzen Liste und dem Knopf. Die Karte behält ihre Größe, das Raster darunter bleibt ruhig.

Zahlen, die hochklappenNeu in 1.2

Große Zahlen, die per Klick nach oben klappen und zeigen, was dahinter steht. Die Drehung nach oben liest sich wie eine Anzeigetafel.

GutscheinNeu in 1.2

Ein großer Gutschein im Akzent. Ein Klick dreht ihn zum Code und drei Schritten zum Einlösen, der Knopf zum Zurückdrehen bleibt in seiner Ecke.

tilt-card

Neigekarten

Karten, die sich wie Glas zum Zeiger neigen, mit einem Licht, das folgt, und Inhalten in eigener Tiefe. Auch der Fokus hebt sie an, auf Touchscreens und bei reduzierter Bewegung liegen sie ruhig und flach.

Props und Details · Neigekarten

Feature-Karten mit TiefeNeu in 1.2

Icon, Titel und Text schweben in drei Tiefen über der Karte, während sie sich neigt. Die ganze Karte ist ein Link, ein weiches Akzentlicht folgt dem Zeiger.

Produkte, die herauskommenNeu in 1.2

Das Produktbild hebt sich aus der Karte, während sie sich neigt, das Badge schwebt am höchsten. Name, Preis und ein Knopf zum Hinzufügen liegen auf der Karte.

Porträts mit FolieNeu in 1.2

Teamkarten mit einem Folienschimmer im Akzent, der sich mit dem Licht dreht. Name und Rolle schweben über dem Porträt, während die Karte sich neigt.

Tarife mit TiefeNeu in 1.2

Drei Tarife, der empfohlene steht vorn und neigt sich weniger. Der Preis schwebt über jeder Karte, der Knopf bleibt darauf.

EintrittskarteNeu in 1.2

Eine Eintrittskarte im Akzent mit perforiertem Abschnitt und Code, stärker geneigt als eine Karte. Text und Buchungsknopf stehen daneben.

depth-layers

Tiefenebenen

Ein Bild, das sich bei Hover, Fokus, per Knopf oder beim Scrollen in seine Ebenen auffächert. Jede Ebene behält ihren Namen als echten Text daneben, ohne JavaScript öffnet sich der Fächer trotzdem beim Hover.

Props und Details · Tiefenebenen

Oberfläche aufgefächertNeu in 1.2

Eine Produktkarte fächert sich beim Hover seitlich in Bild, Fläche, Inhalt und Aktion auf. Die Legende hebt eine Ebene an, ein Knopf öffnet den Fächer auf Touchscreens.

Ebenen beim ScrollenNeu in 1.2

Dieselbe Karte dreht sich und geht auseinander, während die Sektion in die Fenstermitte scrollt, und bleibt so. Ohne JavaScript ruht sie aufgefächert.

Diorama-FensterNeu in 1.2

Eine Landschaft in vier Tiefenebenen hinter einem Fenster, gefärbt im Akzent. Die Szene neigt sich mit der Maus, die Ebenen verschieben sich gegeneinander, die Karte steht davor auf fester Fläche.

Element-InspektorNeu in 1.2

Ein Element, zur Seite gedreht und zerlegt, Schatten, Fläche, Rahmen, Inhalt und Fokusring. Gut für ein Designsystem oder eine Anleitung zu guten Components.

isometric-stage

Isometrische Bühne

Ein Produkt oder System als Platten in einem isometrischen Raum, in seine Ebenen auseinandergehoben. Eine Legende daneben hebt bei Hover oder Fokus eine Platte an, ein Knopf setzt die Bühne zusammen und nimmt sie auseinander.

Props und Details · Isometrische Bühne

Dashboard in EbenenNeu in 1.2

Ein Dashboard in fünf Ebenen, Fenster, Navigation, Kennzahlen, Diagramm und Hinweis, das beim Hereinscrollen auseinandergeht.

SystemstapelNeu in 1.2

Vier gleiche Platten, gestapelt wie Stockwerke, ein System von der Oberfläche bis zur Infrastruktur. Die Legende liest sich von oben nach unten.

Seite in AbschnittenNeu in 1.2

Die Abschnitte einer Website, von Navigation bis Fußzeile, auseinandergehoben. Zusammengesetzt ergeben sie eine Seite, gut für Baukästen und Agenturen.

Ablauf auf einer FlächeNeu in 1.2

Vier Schritte stehen auf einer Fläche, verbunden durch einen Weg, auf dem ein Signal läuft, solange die Bühne zu sehen ist. Zeigen hebt den Block an.

Ähnliche Components

Mehr aus Visuals, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben 3D-Flächen stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert