Skip to main content
Neue Website geplant?
Analyse anfragen

3D Cube Rotation in Webflow nativ, responsiv & als Component.

Ready made Code zum kopieren

In dieser Anleitung zeige ich dir, wie ich in Webflow einen rotierenden 3D Cube gebaut habe, der auf jeder Seite ein anderes Asset zeigt. Das Ganze ist komplett nativ in Webflow, ohne Custom Code, responsiv und am Ende auch als Component wiederverwendbar.

Ergebnis

  • 4 Bild Cards als Würfelseiten
  • echter 3D Look durch Perspective
  • automatische Endlos Rotation beim Page Load
  • Overlay mit Text und Linie auf jeder Seite (Asset Info)
  • 100% Webflow nativ (keine externe Library, kein eigenes JavaScript)
  • Responsiv über eine klare Formel (du musst nur eine Zahl logisch verdoppeln)
  • Optional als Component nutzbar, damit du Assets später super schnell austauschen kannst

Anleitung:


So ist dein Aufbau
(Struktur im Navigator)

Du hast im Prinzip drei Ebenen:

  1. Wrapper: toolbox-hero_cube-wrap
  2. Der eigentliche Cube: toolbox-hero_cube
  3. Vier Cube Seiten (Faces):toolbox-hero_cube-side
    mit Varianten: 1, 2, 3, 4‍
  4. Optional zusätzlich pro Seite ein Overlay für Infos: toolbox-hero_asset-info


Schritt 1: Wrapper richtig setzen (wichtig für Layering)

Class: toolbox-hero_cube-wrap

  • Position: Relative
  • z Index: 3 (genau so, wie du es gebaut hast)

Warum: So liegt der Cube zuverlässig über deinem Hintergrund und du kannst absolute Elemente im Cube sauber platzieren.


Schritt 2: Cube Grundgröße definieren (die wichtigste Regel)

Class: toolbox-hero_cube

Hier setzt du die sichtbare Größe des Cubes.

Desktop Beispiel

  • Width: 32vh
  • Ratio: Portrait (2:3)

Die goldene Regel dahinter

Die Z Tiefe ist immer die Hälfte der Cube Breite.
Heißt: Wenn der Cube 32vh breit ist, sind die Z Werte der Seiten 16vh.


Schritt 3: 3D Perspektive aktivieren (damit es wirklich 3D wirkt)

Auf toolbox-hero_cube in den Transform Settings:

  • Transform Origin: 50% / 50%
  • Backface: Visible
  • Children perspective Distance: 1500px

Damit bekommen die Seiten echte Tiefe beim Rotieren.


Schritt 4: Die vier Seiten positionieren (Desktop Werte)

Base Class: toolbox-hero_cube-side
Wichtig als Grundlogik:

  • Jede Seite liegt im Cube und bekommt ihre eigene 3D Transform
  • Du arbeitest pro Seite mit Move und Rotate
  • Die Z Move Werte sind immer die Hälfte der Cube Breite

Desktop (Cube 32vh → Z Tiefe 16vh)

Side 1 (toolbox-hero_cube-side 1)

  • Move: 0px, 0px, 16vh

Side 2 (toolbox-hero_cube-side 2)

  • Move: 100%, 0px, 16vh
  • Rotate: 0deg, 90deg, 0deg

Side 3 (toolbox-hero_cube-side 3)

  • Move: 0%, 0%, 16vh
  • Rotate: 0deg, 180deg, 0deg

Side 4 (toolbox-hero_cube-side 4)

  • Move: 0%, 0px, -16vh
  • Rotate: 0deg, -90deg, 0deg


Schritt 5: Animation erstellen (Rotation automatisch beim Page Load)

Du erstellst eine Interaction:

Trigger: Page load
Interaction Name: z.B. Cube Page Load
Action: Rotation 360

Target: .toolbox-hero_cube
Duration: 20s
Ease: None
Rotate Y: 0deg → 360deg
Repeat: Infinite

Damit rotiert der Cube dauerhaft gleichmäßig.


Schritt 6: Responsive Anpassungen (Tablet und Mobile)

Hier kommt wieder die gleiche Regel plus eine Einheitenänderung:

Cube Breite ist immer doppelt so groß wie der Z Move Wert.
VH ändert sich zu VW!

Tablet

Cube: 40vw
→ Z Tiefe: 20vw

Also setzt du bei den Seiten dieselben Logiken wie Desktop, nur mit 20vw statt 16vh.

Beispiele (Tablet):

  • Side 1 Move Z: 20vw
  • Side 2 Move Z: 20vw plus Rotate Y 90deg
  • Side 3 Move Z: 20vw  plus Rotate Y 180deg  
  • Side 4 Move Z: -20vw plus Rotate Y -90deg

Mobile

Cube: 50vw
→ Z Tiefe: 25vw

Beispiele (Mobile):

  • Side 1 Move Z: 25vw
  • Side 2 Move Z: 25vw plus Rotate Y 90deg
  • Side 3 Move Z: 25vw  plus Rotate Y 180deg  
  • Side 4 Move Z: -25vw plus Rotate Y -90deg

Das ist der Grund, warum dein Cube responsiv so stabil bleibt: Du passt pro Breakpoint nur diese eine Logik an.


Mini Checkliste zum Troubleshooting

Wenn es irgendwo “komisch” aussieht, liegt es fast immer an einem dieser Punkte:

  • toolbox-hero_cube-wrap nicht auf Relative oder z Index nicht auf 3
  • Children perspective nicht gesetzt (dann wirkt es flach)
  • Z Werte nicht halb so groß wie die Cube Breite
  • Eine Seite hat falsche Rotate Y Richtung oder falsches Z Vorzeichen


Component Setup

‍
Du willst später nur noch Bild und Text pro Seite austauschen, ohne jedes Mal in die Struktur zu gehen.

So baust du es als Component auf

  1. Markiere den kompletten Block toolbox-hero_cube-wrap im Navigator
  2. Rechtsklick → Create Component
  3. Nenne sie z.B. Toolbox cube

Props anlegen (damit du Assets pro Seite tauschen kannst)

Für jede Seite legst du Properties an:

  • 01 Asset Image
  • 01 Asset Text
    und das gleiche für 02, 03, 04

Vorgehen je Property:

  1. Klicke in Side 1 das Image Element
  2. In den Component Einstellungen: Create Property → Typ Image
  3. Wiederhole das für den Text in Side 1 → Typ Text
  4. Wiederhole das für Side 2 bis Side 4

Danach kannst du auf jeder Seite, wo du die Component nutzt, die vier Assets direkt im Props Panel befüllen, ohne nochmal in den Aufbau reinzumüssen.

‍