3D - Perspektive in Webflow erstellen

‍

Von Figma zu Webflow

Bei uns gestaltet sich der Workflow so, dass wir zum Designen das Tool Figma benutzen. erfahre hier mehr über Fig. Also übertrage ich zuerst das Layout aus Figma in Webflow. Erfahre hier wie Merlin die 3D-Perspektive in Figma erstellt hat. In Webflow lege ich also zuerst die Grundstruktur an. Um Das Bild und den Text nebeneinander darstellen zu lassen, habe ich hier dem Wrapper drumherum die Einstellung flex-box gegeben. Sowohl der Text-, als auch der Image-Wrapper haben eine feste Breite von 50% ihres Elternelement

‍

‍

‍

Es werde “Licht” - Füge einen Gradient hinzu

Im Ersten Schritt füge ich der Section einen Gradient hinzu. Um den 3D-Effekt in Webflow zu verstärken, lassen wir das Bild über den helleren Bereich des Gradients stehen, um einen fiktiven Lichtstrahl zu erzeugen. Füge einen Gradient im Stylepanel unter “Backgrounds” und “Image § Gradient” hinzu.

‍

‍

‍

3D - Perspektive in Webflow hinzufügen

Im zweiten Schritt füge ich das Bild hinzu und stelle die 3D-Perspektive in Webflow ein. Hierfür gehe ich im “Stylepanel” unter “Effects” auf “2D & 3D transforms”. Um die 3D Perspektive einzustellen, lasse ich das Bild unter "rotate" 50 Grad auf der Y-Achse rotieren.

‍

‍

Als nächstes gebe ich dem Elternelement unter den Einstellungen eine “children perspective”. Hier kannst du gern als Wert eine Range von 500-1000 Pixel testen. Nur in der "Children perspective" wird sich das Bild optisch ansehnlich im Raum ausrichten, da wir mit dieser Einstellung das Kindelement (Bild) relativ zum Elternelement ausrichten.

‍

‍

‍

‍

Füge einen Box Shadow hinzu

Im dritten Schritt gebe ich unter “Box shadow” dem Bild einen Schatten, da das Bild durch den fiktiven Lichtstrahl des Gradients einen fiktiven Schatten an die dahinter liegende Wand wirft. ich würde dir empfehlen, den Schatten nach der 3D Ausrichtung zu erstellen, da du erst dann sehen kannst, wie der Schatten in der 3D Perspektive wirkt. Dem Schatten gebe ich 4 Einstellungen mit:

• Mit der Distance variiere ich die Entfernung des Schattens zum Bild bzw. Objekt. Je weiter der Schatten entfernt wird, desto weiter steht das Objekt scheinbar im Raum
• Mit dem Blur kannst du dem Schatten weichere Konturen
• Mit der Size kannst du die Schattengröße einstellen.
• Mit dem Angle kannst du den Winkel einstellen, wie der Schatten am Bild oder Element ausgerichtet wird. Achte hier darauf, dass sie der Schatten realistisch mit dem Lichteinfall ausrichtet.
• ‍

‍

Hast du alle drei Punkte befolgt, kannst du durch diese Einstellungen eine super 3D - Ansicht in Webflow erstellt. Einfach aber genial!

‍

‍

Gut zu Wissen!

Achte im responsive Design darauf, dass das Bild mit der 3D-Perspektive in Webflow skaliert. Ansonsten achte darauf, dass sich durch die Rotation die Größen des Bildes bzw. des Wrappers drumherum ändern und unter Umständen die Breite und Höhe den Bildschirmrand überschreiten. Auch der Schatten sorgt für zusätzlich benötigten Platz. Hier entsteht ungewollt oft ein  horizontales Scrollen. Also entweder adäquat skalieren und mit relativen Größen arbeiten oder du gibst der Sektion bzw. einem wrapper um dem Bild die Einstellung „overflow hidden“, wodurch überstehender Content angeschnitten wird.

‍

‍

Für weitere Figma und Webflow Tutorials Check gern unsere socials aus oder schau dir weitere Blogs auf unserer Website an.

‍