Accentsconagua
Share
Wir beziehen uns für dieses Tutorial auf die neueste Initiative von Envato. Envato Elements. Auf der Homepage von Elements finden Sie eine Reihe kreativer Produkte (Schriftarten, Symbole, Grafikvorlagen usw.), die zusammen in einem übersichtlichen isometrischen Rasterlayout angezeigt werden.
Die Elements-Startseite Wir werden diese isometrische Landschaft mit CSS 3D-Transformationen neu erstellen.
Die „isometrische Projektion“ ist eine Methode (in der Technik und in Spielen der 80er und 90er Jahre, in denen die 3D-Verarbeitungsleistung sehr begrenzt war), um ein Design in scheinbar dreidimensionalen Dimensionen zu präsentieren.
Einige Objekte werden mit der isometrischen Projektion angezeigt. Bild von Wikipedia. Dies sind keine drei Dimensionen, wie wir sie im wirklichen Leben erfahren - der Ebene, auf der sie dargestellt werden, fehlt die Perspektive.
Seit vielen Jahren ist die Bahn eine zweidimensionale Umgebung, und wir sind daran gewöhnt, Elemente entlang zweier Achsen oder Richtungen zu positionieren: der x-Achse (horizontal) und der y-Achse (vertikal)..
Hinweis: Die y-Achse der Bahn ist entgegen dem ursprünglichen kartesischen Koordinatenprinzip umgekehrt, da die Bahn von oben nach unten gelesen wird.
Die dritte Achse, nämlich die Z-Achse, wird benötigt, um eine 3D-Ansicht zu projizieren. Diese Achse repräsentiert Tiefe, und die Bewegungsrichtung eines Objekts entlang der z-Achse ist relativ zu unserem Standpunkt; es kann sich von oben nach unten, von oben nach unten oder in die Nähe von weit bewegen.
Die drei Achsen x, y und z in der 3D-Ebene. Bild von W3C. Diese drei Achsen können auf die CSS-Transformationsfunktion angewendet werden, um eine 3D-Projektion zu erstellen. In der folgenden Demo verwenden wir die RotateX (), RotierenY (), und RotateZ () Funktion zum Erstellen einer isometrischen Projektion eines Rechtecks:
Nun, da wir das Grundprinzip haben, das einer isometrischen Projektion zugrunde liegt, können wir es in die Praxis umsetzen. Und wir beginnen mit dem HTML.
Ähnlich wie auf der Envato Elements-Homepage haben wir ein Rasterlayout. Unser Raster umfasst eine Reihe mit neun Spalten. Jede Spalte enthält ein Produktbild, den Link, der auf die Produktseite verweist, und wie Sie unten sehen können, a Spanne Element, mit dem wir den Bildschatten modellieren.
Wir beginnen mit den Stilen, die die Standardstile einiger Elemente zurücksetzen.
html Box-Sizing: Border-Box; *, *: before, *: after Box-Sizing: erben; img max-width: 100%; Höhe: Auto; Bildschirmsperre; Zahl Marge: 0;
Diese Stile setzen alle Elemente mit Box-Sizing, Dadurch wird die Bestimmung der Gesamtgröße des Elements leichter vorhersehbar. Wir setzen auch die Bildwiedergabe auf Block um diesen kleinen Leerraum am unteren Rand des Bildes zu entfernen. Und zum Schluss entfernen wir die Zahl Elementrand, der das Bild umschließt.
Dann fahren wir mit den Zeilen- und Spaltenstilen fort.
.Reihe Breite: 960px; Anzeige: Flex; Flex-Wrap: Wrap; Rechtfertigungsinhalt: Flex-End; Transformation: RotateX (60 Grad) RotationY (0 Grad) RotateZ (-45 Grad); .column padding: 20px; Breite: 50%; Max-Breite: 50%; Biegung: 1 1 50%;
Die obigen Stile setzen die Zeile auf Anzeige: Flex, Setzen Sie die Transformationsstile auf 3D, damit die Browser die Z-Achsentransformation korrekt einhalten, die Zeile drehen, um eine isometrische Ansicht zu erstellen, und die Spalten innerhalb der Zeile schließlich in zwei Hälften teilen.
Als Nächstes müssen wir die Stile hinzufügen, mit denen die untergeordneten Elemente der Zeile und Spalte in der 3D-Ansicht positioniert werden. Dieser folgende Stil ist wesentlich. Das transform-style: preserve-3d müssen auf jedem Element angegeben werden, das unter .Reihe, Sie werden also im 3D-Raum korrekt gerendert - insbesondere in Firefox - und die Z-Achse wird wirksam.
.Zeile, Spalte, .ItemCard, .ItemCard__dest, .ItemCard__thumb position: relative; Sicht nach hinten: versteckt; Verwandlungsstil: preserve-3d;
Als Nächstes fügen wir dem hinzu .Abdeckung Klasse, die wir dem Produktlink-Anker-Tag hinzugefügt haben, und der Spanne Element (bald der Schatten sein).
.Abdeckung Anzeige: Block; Position: absolut; oben: 0; links: 0; Breite: 100%; Höhe: 100%;
Nachdem dieser Stil hinzugefügt wurde, werden sowohl der Produktlink als auch der Spanne Das Element erstreckt sich jetzt über den gesamten Behälter. Wir können auch die Position des Elementstapels später ändern.
Die folgenden Stile bestimmen die Position des Image-Wrapper-Elements, die Auffüllung und einige 3D-Elemente. Das Sicht auf die Rückseite ist so eingestellt, dass wir nicht durch den Stapel unter dem übersetzten oder gedrehten Element sehen und die invertierte Fläche des Bildes nicht sehen können.
Wir wenden einen Übergang auf das Bild an und bewegen uns durch die Z-Achse, um den Schatten "vorbei" zu "schweben" 15px. In ähnlicher Weise fügen wir auch 3D-Sachen hinzu: Sicht auf die Rückseite und verwandeln-Stil, So wird die 3D-Ansicht ordnungsgemäß gerendert.
.ItemCard__thumb img position: relativ; z-Index: 1; Übergang: Transformieren Sie 0,3 s in Kubik-Bezier (0,165, 0,84, 0,44, 1); transform: translate3d (0, 0, 20px);
Das Folgende gibt uns unsere Schattenstile. Die Schattenverteilung sollte eng und der Schatten Schatten dunkler sein, da das Bild an diesem Punkt näher ist (um 15px) auf den „Boden“, wo der Schatten reflektiert wird.
.Schatten Anzeige: Block; Übergang: alle 0,3 s Kubik-Bezier (0,165, 0,84, 0,44, 1); Deckkraft: .9; Hintergrundfarbe: rgba (0, 0, 0, 0,1); Box-Schatten: 0 0 5px 1px rgba (0, 0, 0, 0,1);
Wir haben einige Fortschritte gemacht:
Beachten Sie die abgerundete Ecke und den Schatten unterhalb des Bildes.Durch den Hover-Effekt wird jedes Miniaturbild der Bilder ansprechender.
.Spalte: hover .ItemCard__dest z-index: 10; .column: hover .ItemCard__dest, .column: hover .ItemCard__thumb img transform: translate3d (0, 0, 50px) rotateX (-5deg); Transformationsursprung: Mitte unten; .column: hover .ItemCard__thumb .shadow Deckkraft: .6; Hintergrundfarbe: rgba (0, 0, 0, 0,1); Box-Schatten: 0 0 10px 6px rgba (0, 0, 0, 0,1);
Wie im obigen Code-Snippet gezeigt, bewegen wir den Elementstapel im Hover-Status zunächst nach oben, sodass das Bild (und der Link) über dem Rest der Elemente im Raster angezeigt werden.
Wir werden das Bild auch etwas anheben; Bewegen Sie es vom „Boden“ weg und etwas näher an die „Lichtquelle“. Nachdem dies gesagt wurde, sollte der Schatten an Klarheit verlieren, sodass die Deckkraft der Schatten verringert wird.
Der Schwebezustand wird höher als der Rest angehoben und leicht gekipptIn diesem Lernprogramm haben wir 3D-Transformationen in CSS verwendet, um eine Nachbildung des isometrischen Rasters von Envato Elements zu erstellen. Wir haben auch gelernt, Realismus in Bezug auf Schatten und Lichtquellen hinzuzufügen. Schauen Sie sich die Demo an, schnappen Sie sich die Quelldateien und lassen Sie uns wissen, was Sie damit machen!
3D-Transformationen sind ein leistungsfähiges CSS-Dienstprogramm. Betrachten Sie sie jedoch nicht nur als Spielerei oder Spielzeug, wenn Sie dem Web eine ausgefallene Ebene hinzufügen möchten. Bei sorgfältiger Anwendung können 3D-Elemente auch einige Designprobleme lösen.
