Advertisement
  1. Code
  2. HTML & CSS

Erstellen einer Kickbutt CSS-Only 3D-Diashow

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

In diesem Tutorial werde ich Ihnen zeigen, wie Sie eine 3D-Diashow nur mit HTML und CSS erstellen. Kein JavaScript erforderlich! Starten Sie Safari und legen Sie los!


Theorie

Bevor wir uns mit der Erstellung unserer Diashow befassen, ist es wichtig, unseren Ansatz zu verstehen. Wir werden die neuen 3D-Transformationen verwenden, die Teil der CSS3-Spezifikation sind. Sie haben wahrscheinlich andere Tutorials gesehen, wie Sie mit diesen Transformationen Objekte erstellen und in einem 3D-Raum animieren können. Normalerweise verlassen wir uns beim Erstellen einer Diashow auf JavaScript, um diese Transformationen auszulösen. JavaScript erkennt ein Klickereignis und aktualisiert eines unserer HTML-Elemente (normalerweise durch Hinzufügen einer Klasse). Das aktualisierte Element würde dann neue CSS-Stile erhalten.

Das Besondere an diesem Tutorial ist, dass wir JavaScript umgehen, indem wir nur CSS verwenden, um Klickereignisse auszulösen und die Stile unseres Elements zu aktualisieren. Jeffrey Way's jüngster Quick Tip, Mimic a Click Event mit CSS, beschreibt eine Möglichkeit, dies mithilfe der :target-Pseudoklasse zu tun. Hier verwenden wir die Pseudoklasse :focus und das HTML5-Element <figcaption>, aber die Idee ist dieselbe.

Diese Methode ist nicht unbedingt "besser" als die Verwendung von JavaScript, sondern lediglich eine nette Alternative, die die Vorteile der neuesten HTML5-Elemente nutzt.


Schritt 0: Erste Schritte

Beginnen wir mit der Erstellung einer index.html und einer style.css. Wir werden auch einen images-Ordner erstellen.

Unser 3D-Objekt wird eine rechteckige Box mit vier Flächen von 940px by 400px und zwei Flächen von 400px by 400px faces sein. Ich habe sechs Bilder in die Quelldateien aufgenommen. Legen Sie diese oder Ihre eigenen Versionen in den Ordner "images".


Schritt 1: Der HTML

Unten finden Sie unser Basis-HTML. Wir werden alles mit einem container umhüllen und unsere Diashow wird sich natürlich in einem div-Element namens slideshow befinden.

Fügen Sie in slideshow den folgenden Code für unsere sechs Bilder hinzu:

Beachten Sie, dass unsere Bilder (die sechs Flächen unseres 3D-Objekts) in eine <figure> mit der ID der box eingeschlossen sind. Dieses Element drehen wir, wenn wir unsere Diashow animieren.

Der Trick

Jetzt kommt der Trick, mit dem wir nur CSS verwenden können, um Klickereignisse zu erkennen. Wir werden die box mit sechs anderen <figure>-Elementen umschließen. Jedes repräsentiert eine andere Drehung unseres 3D-Objekts. Das tabindex-Attribut ermöglicht es diesen Elementen, die Pseudoklasse zu erhalten :focus.

Jede <figure> benötigt außerdem ein <figcaption>-Element. Diese Beschriftungen dienen als Schaltflächen. Wenn Sie darauf klicken, wird die übergeordnete <figure> ausgelöst, um Folgendes zu erhalten :fokus. Dadurch können wir sechs verschiedene CSS-Transformationen auf box verwenden.

Es mag im Moment etwas kompliziert klingen, aber es wird Sinn machen, sobald wir das CSS erreicht haben. Wickeln Sie die box zunächst mit sechs <figure>-Elementen ein und geben Sie jedem einen eindeutigen tabindex und eine eindeutige ID. Fügen Sie dann für jede <figure> eine <figcaption> hinzu.

Endgültiges HTML

Das endgültige Markup in index.html sollte folgendermaßen aussehen:


Schritt 2: Grundlegendes CSS

Öffnen wir zunächst style.css und fügen Sie einen Reset-Code ein, nur aus gutem Grund. (Das Entfernen von Konturen, die durch :focus verursacht werden könnten, ist wichtig.)

Als nächstes geben wir unserer Seite einen schönen Hintergrund mit Farbverlauf:

Der background-image-Code enthält die Mozilla- und WebKit-Vender-Präfixe. Wenn Sie möchten, dass eine Version der Diashow mit Internet Explorer funktioniert, erstellen der filter und der -ms-filter einen Verlauf in IE6, 7 und 8. (Ich habe diesen Code auf der nützlichen Website www.css3please.com generiert.)

Fügen wir nun Code für unseren container, unsere slideshow und unsere box hinzu:

Unser container hat eine Breite von 960px und wird mit margin: 0 auto zentriert. Das slideshow-Div ist 900px breit, zentriert und wird 50px vom oberen Rand der Seite nach unten gedrückt. Wir geben es auch 50px Polsterung oben. Dieser Auffüllbereich enthält unsere Diashow-Schaltflächen, die <figcaption>-Elemente, sobald wir sie positioniert haben.

Das Element, das eigentlich unsere Diashow enthält, box, wird auf die gleiche Größe wie unsere Bilder gesetzt. Es ist auch wichtig, position auf relative zu setzen, da wir einige seiner Kinder absolut positionieren werden. Unsere anderen <figure>s werden display: inline, aber box muss ein Blockelement sein.

Stellen Sie nun die folgenden Stile für unsere sechs Bilder ein:

Wir positionieren unsere Bilder absolut so, dass sie alle direkt übereinander in der oberen linken Ecke der box gestapelt werden. (Standardmäßig sind top und left auf 0 gesetzt. Der Übersichtlichkeit halber wurde es eingefügt.)

Im Moment sieht unsere Diashow folgendermaßen aus:

Fügen wir etwas Styling für unsere <figcaption>-Schaltflächen hinzu:

Der erste Abschnitt dieser Stile ist rein ästhetisch. Dadurch werden die Schaltflächen halbtransparent und abgerundet und der Text zentriert und schattiert. Außerdem wird der Mauszeiger in einen Zeiger geändert, sodass Benutzer wissen, dass sie klicken können.

Im zweiten Abschnitt werden unsere Schaltflächen über den Bildern positioniert, zentriert und platziert.

Stellen Sie sicher, dass Sie die Schaltflächen außerhalb der Grenzen der sechs <figure>-Elemente positionieren. Andernfalls wird das Klicken auf die Schaltfläche tatsächlich als Klicken auf die innerste <figure> anstelle der dieser Schaltfläche entsprechenden registriert.

Das letzte Codebit fügt Übergänge hinzu. Das liegt daran, dass wir dem Schwebezustand <figcaptions> ein Styling hinzufügen werden:

Unsere gestalteten Knöpfe sollten folgendermaßen aussehen:


Schritt 3: Die 3D-Box

Als erstes müssen wir dem Browser mitteilen, dass wir in einem 3D-Raum arbeiten werden. Dazu verwenden wir die perspektive-Eigenschaft für ein übergeordnetes Element. Wenden wir es (mit dem WebKit-Vender-Präfix) auf slideshow an:

Der Wert der Perspektive bestimmt, wie viele Pixel der "Betrachter" vom 3D-Objekt entfernt ist. Je niedriger der Wert, desto übertriebener ist der 3D-Effekt.

Wir müssen auch den 3D-Raum in allen unseren untergeordneten Elementen beibehalten. Dazu fügen wir allen unseren <figures>s die transform-style: preserve-3d-Eigenschaft hinzu. (Wieder verwenden wir das WebKit-Vender-Präfix.)

Okay, jetzt ist es Zeit, die einzelnen Gesichter (unsere sechs Bilder) zu transformieren, um eine 3D-Box zu erstellen. Wir werden jedes Bild mit der Pseudoklasse nth-child() als Ziel festlegen, aber es würde auch funktionieren, jedem <img> eine bestimmte ID zuzuweisen. Stellen Sie sicher, dass Sie diesen Code unter den aktuellen Stilen im Stylesheet hinzufügen.

Hier ist der Code, ich werde ihn unten erklären:

Okay, hier ist, was los ist: Das erste Bild wird überhaupt nicht gedreht, aber es wird um 200 pixels auf seiner Z-Achse vorwärts (in Richtung des Betrachters) verschoben.

Das zweite Bild wird um 180 degrees um seine X-Achse gedreht, so dass es vom Betrachter weg zeigt. Es wird dann 200 pixels auf seiner Z-Achse vom Betrachter weggeschoben.

Beachten Sie, dass die Reihenfolge der Transformationen eine Rolle spielt - die Drehung ändert den Ursprung des Objekts und dann erfolgt die Verschiebung entlang einer neuen Achse.

Unser drittes und viertes Bild werden jeweils um die X-Achse gedreht, um nach oben bzw. unten zu zeigen. Dann werden beide 200 pixels entlang ihrer neuen Z-Achsen verschoben.

Denken Sie daran, unsere Box ist 900px breit, 400px hoch und 400px tief. Die vier Seiten (die 940px x 400px großen Flächen) müssen 400 Pixel voneinander entfernt sein. Deshalb übersetzen wir sie alle 200 Pixel in entgegengesetzte Richtungen. Die beiden Enden (die 400px x 400px großen Flächen) werden 900 Pixel voneinander entfernt verschoben.

Das fünfte und sechste Bild befinden sich derzeit auf der linken Seite der box und sind nicht zentriert. Aus diesem Grund erhalten unser fünftes und sechstes Bild unterschiedliche Übersetzungen. Beide haben ihren Ursprung 200 Pixel rechts vom linken Ende der box. Das fünfte Bild muss um -90 degrees um die Y-Achse gedreht werden, um nach links zu zeigen, und dann entlang seiner neuen Z-Achse um 200 Pixel verschoben werden. Dadurch wird es am linken Ende unseres 3D-Objekts platziert. Das sechste Bild wird um 90 degrees um die Y-Achse gedreht, um nach rechts zu zeigen, und dann um 700 Pixel entlang seiner neuen Z-Achse verschoben. Dadurch wird es am rechten Ende unseres 3D-Objekts platziert.

Der beste Weg, um ein Gefühl dafür zu bekommen, was wir getan haben, ist die aktuelle Anordnung der Bilder. Wenn Sie eine Vorschau der Diashow in Safari anzeigen, wird Folgendes angezeigt:

Verstecken wir die Vorderseite - damit wir sehen können, ob unsere anderen Bilder richtig positioniert sind:

Jetzt können wir das Innere unserer Box sehen:

Entfernen Sie nun display: none von unserem ersten Bild. Möglicherweise haben Sie bemerkt, dass die Box auf dem Bildschirm größer ist - näher am Betrachter - als sie sein sollte. Besonders die Vorderseite sieht zu groß und gedehnt aus.

Um dies zu korrigieren, müssen wir das gesamte 3D-Objekt um 200 Pixel vom Betrachter entfernen. Fügen Sie -webkit-transform: translateZ(-200px) zu den Stilen für box hinzu. Während wir gerade dabei sind, sollten wir auch die Übergangseigenschaft hinzufügen:

Mit all dem Set sind wir bereit, unsere Box zu animieren.


Schritt 4: Animation

Fügen Sie unseren letzten Block des Stylings ein. Dadurch werden unsere Animationen hinzugefügt. Ich werde es weiter unten näher erläutern.

Wenn jedes unserer <figure>-Elemente die Pseudoklasse :focus erhält, drehen wir die box, um die richtige Seite anzuzeigen. Beachten Sie, dass die box-Rotationen das Gegenteil der Rotationen sind, die wir auf jeder einzelnen Fläche verwendet haben. Zum Beispiel wurde das vierte Bild um 90 Grad um die X-Achse negativ gedreht. Um es sichtbar zu machen, müssen wir das gesamte positive 3D-Objekt um 90 degrees um die X-Achse drehen. Die Übersetzungen stellen sicher, dass die Seite des 3D-Objekts, die wir betrachten, immer den richtigen Abstand hat.

Das ist es! Schauen Sie sich die Diashow in Safari an, um sicherzustellen, dass alles funktioniert.

Endgültiges CSS

Das endgültige Styling in style.css sollte folgendermaßen aussehen:


Abschließende Gedanken

Es gibt wahrscheinlich keine Möglichkeit, die Verwendung einer Reihe verschachtelter <figure>s- und <figcaption> elements als Schaltflächen unter den aktuellen CSS3-Empfehlungen zu rechtfertigen. Dieses Experiment berücksichtigt auch nicht die Unterscheidung zwischen HTML für Inhalt, CSS für Stil und JS für Verhalten. Und da diese Transformationen derzeit nur in Safari funktionieren, ist diese Diashow keineswegs bereit, tatsächlich in Client-Projekten verwendet zu werden. Der Zweck dieses Experiments besteht jedoch darin, die Grenzen der neuen HTML5- und CSS3-Funktionen aufzuzeigen und zu erweitern.

Wenn Sie diese Diashow für Browser mit weniger Unterstützung anpassen möchten, finden Sie hier einige hilfreiche Tipps:

  • Verwenden Sie Modernizr. Ernsthaft!
  • Nur Safari unterstützt die 3D-Transformationen, aber Sie können mithilfe von 2D-Transformationen eine raffinierte Diashow erstellen und eine viel größere Auswahl an Browsern unterstützen.
  • Die opacity-Eigenschaft würde eine großartige verblassende Diashow erstellen und in fast jedem Browser funktionieren. (Sie benötigen filter für IE).
  • Die <figcaption>-Schaltflächen werden in Firefox unterbrochen, wenn sie absolut positioniert sind. Es ist komisch, ich weiß. Stellen Sie einfach sicher, dass Sie die relative Positionierung verwenden.

Ich hoffe euch hat dieses Tutorial gefallen. Ich freue mich auf Ihre Kommentare und vielen Dank für das Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.