Hilfreiche Ratschläge

So erstellen Sie beeindruckende 3D-Grafiken in CSS3

Pin
Send
Share
Send
Send


Der Übersichtskanal zeigte, wie ein 3D-Würfel im Online-Dienst bloggif.com erstellt wird. Klicken Sie dazu auf den 3D-Würfel, und im nächsten Fenster beginnen wir, ihn zu erstellen. Fügen Sie dazu fünf Bilder hinzu. Hinzufügen. Betrachten Sie das Beispiel der Bären. Wir wählen - die erste, zweite, dritte Figur, ersetzen die zweite, vierte und fünfte. Als nächstes müssen Sie die Drehzahl auswählen. Verlasse Rapide - das ist die durchschnittliche Geschwindigkeit. Sie können den Hintergrund auswählen, auf dem sich der Würfel befinden soll. Wenn Sie ohne Hintergrund möchten, müssen Sie nur das Kontrollkästchen - TRANSPARENT aktivieren.

Wähle blau. Und die Drehrichtung. Dann drücken wir den Knopf - CREATE MY 3 D CUBE. Jetzt ist der 3-D-Würfel fertig. Vor dem Herunterladen ein Häkchen setzen - ohne Logo herunterladen und mein Gif herunterladen. Wir wählen den Ordner zum Speichern aus, benennen die Datei und sehen, was passiert ist. Das Ergebnis war eine solche Würfel-GIF-Animation. Das ist alles Wenden Sie das erworbene Wissen an. Olga Taranukha war bei dir.

Warum CSS benutzen?

Es gibt viele Möglichkeiten, 3D-Grafiken in HTML zu erstellen. Basierend auf JS, Canvas, SVG stehen sogar WebGL-basierte Lösungen zur Verfügung, die alle ihre Vorteile haben, aber es gibt auch CSS.

Eine CSS-basierte Lösung verzichtet auf Bilder und kann mithilfe eines Grafikprozessors die Grafikverarbeitung beschleunigen.

Es sind keine Plugins erforderlich, und CSS kann außerhalb der Canvas-Wände Ihrer Seite installiert werden:

CSS 3D-Grafiken sind nicht so optimiert wie WebGL. Ein separates Thema sind inkompatible Browser. Die Einbindung von 3D-Objekten in Webprojekte eröffnet jedoch neue Arbeitsfelder und kann heute genutzt werden.

Nicht alle Browser unterstützen die in diesem Artikel verwendeten 3D-Transformationen vollständig. Der Kürze halber verwende ich daher das Präfix -webkit.

Vergessen Sie nicht, Präfixe für Mozilla, Opera, MS sowie ggf. Versionen ohne Präfixe anzugeben. Vollständige CSS-Versionen (mit Präfixen) befinden sich in den Projektdateien.

Die Grundlagen: Erstellen eines 3D-Würfels

Zunächst erstellen wir einen einfachen 3D-Würfel, indem wir ihn im 3D-Raum platzieren und animieren. Schreiben Sie zunächst HTML-Code, der Teile eines 3D-Würfels darstellt:

Ich habe das Element figure verwendet, aber Sie können nach Belieben ein div, span oder eine andere Art von Element verwenden.

In diesem HTML-Code können zwei Hauptteile unterschieden werden: die Szene, in der sich alles befindet, und der Würfel, der sich in der Szene befindet:

Szenenvorbereitung

Wenn Sie ein 3D-Modell erstellen, müssen Sie zunächst ein Element erstellen, das als Szene fungiert.

Legen Sie die Szenentiefe mithilfe der CSS-Perspektive fest:

Wenn Sie einen größeren Wert für die Perspektiveneigenschaft festlegen, wird der 3D-Effekt weniger auffällig, während er durch einen kleineren Wert ausgeprägter wird.

Ein Wert von ca. 800 Pixel ist im Allgemeinen für die meisten kleinen Objekte geeignet. Wenn Sie jedoch etwas Größeres (z. B. einen Wolkenkratzer) erstellen, können Sie einen niedrigeren Wert verwenden, um deutlichere Winkel zu erstellen.

Wenn Sie die Perspektiveneigenschaft festlegen, müssen Sie auch den Perspektivursprung (eine Eigenschaft, die die Position der virtuellen Kamera in Bezug auf die Szene bestimmt) auf der X- und Y-Achse festlegen.

Formen schaffen: räumliches Denken

Das Erstellen von 3D-Formen mit HTML und CSS umfasst das Darstellen eines Objekts als Satz zweidimensionaler Ebenen.

Anstatt Scheitelpunkte zu zeichnen und Formen aus Punkten und Linien zu sammeln, wie Sie wissen, arbeiten wir mit zweidimensionalen Ebenen und positionieren sie gleichzeitig. Wir stellen einen Würfel aus sechs Ebenen zusammen, die den Seiten, der Spitze und der Basis entsprechen.

Geben wir zunächst den Figurenelementen eine Form und einen Stil:

Im nächsten Schritt müssen Sie angeben, wo sie sich im 3D-Raum befinden sollen.

Umstellungszeit

Platzieren Sie die Formen mit der Eigenschaft transform. CSS-Transformationen bestehen aus einer Reihe von Anweisungen, die dem Formular das Bewegen, Drehen, Neigen und Skalieren mitteilen. Anweisungen werden von links nach rechts gelesen.

Achten Sie auf die Verwendung der transform-style-Eigenschaft: Wenn sie auf preserve-3d gesetzt ist, werden Transformationen über die Seiten des Cubes in ihrem eigenen 3D-Raum ausgeführt.

Wir definieren auch den Punkt, zu dem die Transformationen durchgeführt werden.

Die Eigenschaft transform-origin legt den Punkt in X-, Y- und Z-Koordinaten fest, der als Drehmittelpunkt fungiert (dies ist die Mitte der Vorderseite des Elements):

Die vordere Figur ist um 150 Pixel nach vorne verschoben, die hintere um 180 Grad und um 150 Pixel nach hinten.

Hier ist die Reihenfolge wichtig - die Konvertierungsregeln werden von links nach rechts angewendet. Für die zweite Transformation wird ein positiver Wert festgelegt: Nach dem Drehen zeigt die Vorderseite zum hinteren Teil der Szene.

Nach wie vor spielt die Reihenfolge der Transformationsregeln eine Rolle. Wenn das Element gedreht wird, befindet sich seine Z-Achse in einem anderen Winkel, was sich auf alle anderen Transformationen auswirkt.

Legen Sie nun die anderen Seiten:

Jetzt haben wir den Würfel vollständig in der 3D-Szene.

Bewegen Sie sich, bewegen Sie sich

Lassen Sie uns unsere 3D-Kreation mithilfe von CSS-Animationen auf der Bühne drehen:

CSS-Animationen werden mit einer Folge von Keyframes erstellt. Keyframes sind eine Reihe von Objektzuständen, die mithilfe von Prozentsätzen erstellt werden.

Die Animation beginnt mit einer Nullrotation und endet mit einer vollständigen Rotation des Elements um die Y-Achse.

Wenden Sie diesen Keyframe-Satz mit der Animationseigenschaft an:

Die hier angewendete Rotationsanimation ist für 10 Sekunden ausgelegt und wird endlos mit einer konstanten linearen Geschwindigkeit wiederholt:

Wir haben einen Würfel, der sich auf der Bühne dreht, aber jetzt ist er von allen Seiten beleuchtet. Um einen Schatten hinzuzufügen, ohne weitere Selektoren zu verwenden, verwenden wir Pseudo-Selektoren.

Pseudo-Selektoren sind so etwas wie zusätzliche HTML-Elemente, die vor und nach dem Inhalt eines Elements eingefügt werden können.

Sie bieten uns zusätzliche Funktionen und können Verläufe, Farben oder sogar Text enthalten. Auf diese Weise können wir das Dimmen auf jeder Seite des Würfels animieren.

Wir brauchen zwei Farbverläufe: einen für den Fall, dass sich die Oberfläche nach links dreht, den anderen für die Drehung nach rechts:

Die Vorher- und Nachher-Elemente in diesem Beispiel sind Pseudo-Selektoren, die gestaltet und animiert werden können.

Es ist wichtig zu beachten, dass diese Funktion von Browsern noch nicht vollständig unterstützt wird - Google Chrome, Firefox und IE10 bieten unterschiedliche Unterstützungsstufen - und die Situation kann sich verbessern.

Wenden Sie auf jeden Pseudo-Selektor eine Animation an, um zu bestimmen, wann diese Farbverläufe angezeigt / ausgeblendet werden sollen:

Jede Animation besteht aus einer Reihe von Keyframes, mit denen der Verlauf während der Animation ein- oder ausgeblendet wird.

Die folgenden Keyframes werden auf die Rückseite angewendet:

Der vollständige Satz von Animationen sowie die Präfixe für jeden Browser befinden sich in den Projektdateien.

Oben und unten

Der nächste Schritt ist der obere und untere Rand des Würfels. Ein Scheitelpunkt benötigt einen Verlauf, der aussieht, als würde sich nichts bewegen.

Fügen Sie dem oberen Element einen Farbverlauf hinzu und drehen Sie es in die entgegengesetzte Richtung:

Die Basis des Würfels ist nicht sichtbar, aber wir können sie verwenden, um das Box-Shadow-Attribut hinzuzufügen:

Mehr als nur Farbe

Zu diesem Zeitpunkt haben wir nur mit CSS einen schattierten animierten Würfel erstellt, allerdings mit durchgezogenen Seiten. Da wir mit HTML-Elementen arbeiten, können wir mit dem Inhalt herumspielen.

Die Flächen eines Würfels können Bilder, Text oder sogar andere Animationen enthalten. Im folgenden Beispiel habe ich einige Hintergrundbilder aus einem Minecraft-Spiel angewendet:

Die zuvor hinzugefügte Schattierung ist hier noch vorhanden, wodurch die Seiten des Würfels eine stärkere Tiefenwirkung erhalten. Dieser Effekt wirkt sich auf alle Inhalte im figure-Element aus.

Wenn animierte Schattierungen und Schatten nicht ausreichen, können wir der Szene mit ausgefallenen WebKit-Filtern etwas mehr Glanz verleihen (beachten Sie, dass diese Funktion derzeit nur mit WebKit möglich ist):

Inhalt hinzufügen

Fügen Sie den Inhalt hinzu, der beim Drehen des Cubes in das Sichtfeld des Benutzers fällt. Dies geschieht auf der rechten Seite des Würfels. Wir verbinden ein kleines JavaScript mit der Arbeit, um den "Folgen" -Button (verfügbar auf der Twitter-Buttons-Seite) aufzurufen.

Das figure-Element mit dem Klassenrecht sollte etwa Folgendes enthalten:

Die Schaltfläche Folgen wird platziert, indem dem CSS eine Iframe-Regel hinzugefügt wird:

Tweet auf einem Würfel

Twitter bietet eine einfache Möglichkeit, die neuesten Tweets als Widgets abzurufen. Um das Widget zu installieren, melden Sie sich bei Ihrem Twitter-Konto an und rufen Sie die Twitter-Widget-Seite auf.

Wählen Sie "Neue Schaltfläche erstellen" und geben Sie Ihren Twitter-Benutzernamen in das Feld "Benutzername" ein. In diesem Beispiel verwenden wir das netmag-Login.

Klicken Sie auf die Schaltfläche Widget erstellen, um den Einbettungscode zu generieren.

Wir können das Widget stilisieren und die Breite, Höhe und einige Datenwerte im Code festlegen. Ersetzen Sie YOUR_WIDGET_ID durch die in Ihrem Einbettungscode angegebene ID:

Transformationen

Für die Schattierung benötigen wir keine Animation mit Keyframes. Sie wird angezeigt, wenn Sie den Mauszeiger bewegen oder ein Ereignis auslösen.

Fügen Sie der Schattierung der Pseudo-Selektoren einige Übergänge hinzu:

Für den Pseudo-Selektor auf der rechten Seite wird der Opazitätswert von 0,4 eingestellt. Dies fügt einen kleinen Schatten hinzu und Sie können die Deckkraft animieren, sodass das Gesicht heller wird, wenn Sie sich nach vorne drehen.

Das rechte: Nach Pseudo-Selector wird ausgeblendet, da wir den Würfel nicht so viel drehen wie nötig. Die Vorderseite ist abgedunkelt, sie ist jedoch heller als die rechte Seite, wenn sie sich nach vorne dreht:

Hover-Animation

Wenn Sie nun Schattierungseffekte hinzufügen, erstellen Sie einen animierten "Peeping" -Effekt, wenn der Benutzer mit dem CSS-Schwebezustand über den Würfel fährt:

Wenn Sie den Mauszeiger bewegen, wird der Würfel um 50 Grad nach links gedreht. Diese Transformation wird als reibungsloser Übergang ausgeführt, indem die Übergangseigenschaft angewendet wird.

Gleichzeitig steigt die Opazität der Pseudo-Selektoren an der Vorder- und rechten Seite des Würfels auf einen Wert von 0,2.

Das Ergebnis all dieser Übergänge ist ein wunderschöner 3D-Rotationseffekt, mit dem Sie zusätzliche Inhalte ausblenden und anzeigen können, wenn der Benutzer den Mauszeiger über den Würfel hält.

Vollständiger HTML- und CSS-Code finden Sie in den Projektdateien:

Das Erstellen von Objekten aus flachen HTML-Elementen unterliegt einer Reihe von Einschränkungen: Jedes Objekt, das Sie erstellen, muss durch Kombinieren von flachen Formularen erstellt werden, um das Endergebnis zu erhalten.

Es ist schwierig, gekrümmte Objekte wie Röhren und Kugeln zu erstellen, ohne eine große Anzahl von Elementen zu verwenden, daher eignet sich diese Lösung besser für einfachere Objekte.

Wenn Sie jedoch Schatten und Animationen verwenden, können Sie mit einfachen Strukturen beeindruckende Ergebnisse erzielen.

Leistung und Prüfung

Beachten Sie beim Erstellen von 3D-Objekten, dass die Browserleistung und die Computergeschwindigkeit stark variieren können. CSS ist in der Tat nicht für grafisch geladene, komplexe 3D-Szenen optimiert. Sie müssen also vorsichtig sein, wenn Sie mit öffentlichen Projekten arbeiten.

Plattformübergreifender Test: Besucher können auch mobile Geräte oder veraltete, langsame Computer verwenden.

Und obwohl es nur eine Frage der Zeit ist, bis alle Browser 3D-Transformationen, Verläufe und all die eleganten Details unterstützen, die wir hier verwendet haben, ist die Realität, dass die meisten Browser sie immer noch nicht unterstützen.

Wir müssen sicherstellen, dass Besucher, die ältere Versionen von Browsern verwenden, keine verzerrte Seite erhalten.

Ein Ansatz zur Lösung dieses Problems besteht darin, die Feature-Erkennung zu verwenden und eine alternative Version für Browser anzuzeigen, die die gewünschten Eigenschaften nicht unterstützen.

In diesem Fall verwenden wir das Modernizr-Skript, um herauszufinden, ob 3D-Transformationen unterstützt werden. Andernfalls wird ein statisches Bild angezeigt.

Aktivieren Sie zunächst Modernizr im HTML-Header:

Beim Laden wird die Klasse csstransforms3d in das Tag eingefügt. Anschließend verwenden wir diese Informationen, um die Sicherungsoption ein- oder auszublenden:

In diesem Beispiel ist ein statisches Bild eine Alternative. Verwenden Sie das Fallback-Element div, um zweidimensionalen Inhalt in einem Browser oder einer alternativen Nachricht darzustellen:

Nächste Schritte

Ein stilisierter 3D-Würfel ist wahrscheinlich nicht das erste, was die meisten Webdesign-Kunden tun müssen, aber einige der oben genannten Ansätze können unterschiedliche Verwendungszwecke haben.

Sie können einen 3D-Übergangseffekt erstellen, wenn Sie den Mauszeiger über das Logo halten - eine eingängige Möglichkeit, ein neues Produkt zu demonstrieren - oder diese Ansätze verwenden, um komplexe Daten zu präsentieren und zu navigieren. Die Verwendung der Z-Achse im Design öffnet die Tür für viele interessante und unterhaltsame Ideen.

Diese Publikation ist eine Übersetzung des Artikels "So erstellen Sie beeindruckende 3D-Grafiken in CSS3", der vom freundlichen Team des Internet-Technologieprojekts erstellt wurde

Pin
Send
Share
Send
Send