In diesem Lab werden wir einen rotierenden 3D-Würfel mit HTML und CSS erstellen. Der Würfel wird sechs unterschiedlich gefärbte Seiten haben und sich kontinuierlich im 3D-Raum drehen, was die Macht der CSS 3D-Transformationen und Animationen zeigt. Dieses Projekt ist eine ausgezeichnete Einführung in die 3D-Fähigkeiten von CSS und ermöglicht es Ihnen, sich vorzustellen, wie Elemente im dreidimensionalen Raum positioniert und animiert werden können, ohne dass JavaScript erforderlich ist.
Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 60% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.
Einfach starten, ohne Installation.
Erstellen der HTML-Struktur
Ein 3D-Würfel besteht aus sechs Seiten: Vorderseite, Rückseite, Linke Seite, Rechte Seite, Oberseite und Unterseite. Wir müssen eine HTML-Struktur erstellen, die es uns ermöglicht, diese Seiten im 3D-Raum zu positionieren.
Öffnen wir die index.html-Datei in unserem Projektverzeichnis und fügen wir den erforderlichen HTML-Code hinzu, um die Würfelstruktur zu erstellen.
Öffnen Sie die WebIDE, indem Sie auf das Dateiexplorer-Panel auf der linken Seite navigieren.
Klicken Sie auf die index.html-Datei, um sie im Editor zu öffnen.
Kopieren und fügen Sie den folgenden HTML-Code in die Datei ein:
Wir beginnen mit der Standard-HTML5-Dokumentstruktur, einschließlich Metadaten und Titel.
Wir verlinken auf unsere CSS-Datei (style.css), die wir im nächsten Schritt erstellen werden.
Im Body erstellen wir ein Container-div, das unseren Würfel auf der Seite zentriert.
Innerhalb des Containers haben wir ein cube-div, das unser 3D-Objekt werden wird.
Innerhalb des Würfels definieren wir sechs divs, jedes mit der Klasse face und einer zusätzlichen Klasse, die seine Position angibt (Vorderseite, Rückseite usw.).
Jede Seite enthält Text, der seine Position angibt, um uns zu helfen, sie zu identifizieren.
Um Ihren aktuellen Fortschritt zu sehen, suchen Sie nach der Schaltfläche "Go Live" unten in der WebIDE und klicken Sie darauf. Dies startet einen lokalen Webserver und öffnet einen Browser-Tab, der Ihre Seite anzeigt. Derzeit werden Sie nur den Text für jede Seite übereinander gestapelt sehen, da wir noch keine Stile angewendet haben.
Im nächsten Schritt werden wir CSS verwenden, um diese divs in die Seiten eines 3D-Würfels zu transformieren.
Erstellen von grundlegenden CSS-Stilen
Jetzt, da wir unsere HTML-Struktur haben, müssen wir sie gestalten, um die Grundlage für unseren 3D-Würfel zu schaffen. In diesem Schritt fügen wir die erforderlichen CSS-Regeln hinzu, um einen Container für unseren Würfel zu erstellen und die Würfelseiten zu gestalten.
Klicken Sie in der WebIDE auf die style.css-Datei im Dateiexplorer-Panel, um sie zu öffnen.
Kopieren und fügen Sie den folgenden CSS-Code in die Datei ein:
/* Basic reset and page styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container styling with perspective */
.container {
perspective: 1000px;
/* The perspective property defines how far the object is from the viewer */
/* A smaller value creates a more intense 3D effect */
}
/* Cube container styles */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
/* This tells the browser that child elements should be positioned in 3D space */
}
/* Common styles for all faces */
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
opacity: 0.9;
}
Lassen Sie uns den CSS-Code, den wir gerade hinzugefügt haben, verstehen:
Zunächst wenden wir eine grundlegende CSS-Reset-Regel an, um eine konsistente Gestaltung über alle Browser hinweg sicherzustellen, indem wir die Margen und Abstände auf Null setzen.
Wir gestalten das body-Element, um unseren Würfel vertikal und horizontal auf der Seite zu zentrieren, indem wir Flexbox verwenden.
Die .container-Klasse enthält die perspective-Eigenschaft, die für 3D-Effekte von entscheidender Bedeutung ist. Stellen Sie sich vor, Sie setzen damit, wie weit Sie vom Würfel entfernt stehen. Ein Wert von 1000px bietet einen mäßigen 3D-Effekt.
Die .cube-Klasse definiert die Abmessungen unseres Würfels (200px × 200px) und verwendet transform-style: preserve-3d. Diese Eigenschaft ist essentiell, da sie dem Browser mitteilt, dass die untergeordneten Elemente im 3D-Raum positioniert werden sollen, anstatt abgeflacht zu werden.
Die .face-Klasse enthält Stile, die von allen sechs Seiten geteilt werden:
position: absolute ermöglicht es, die Seiten im gleichen Raum zu positionieren.
Jede Seite hat die gleichen Abmessungen wie der Würfel (200px × 200px).
Wir verwenden Flexbox, um den Text auf jeder Seite zu zentrieren.
Wir fügen weiße Rahmen und Text mit Schatten hinzu, um die Sichtbarkeit zu verbessern.
Wenn Sie jetzt Ihren "Go Live"-Browser-Tab aktualisieren, sollten Sie einige Änderungen sehen, aber die Seiten liegen immer noch übereinander. Dies liegt daran, dass wir sie noch nicht im 3D-Raum positioniert haben. Das werden wir im nächsten Schritt tun.
Lesen reicht nicht – Programmieren ist Praxis.
Positionieren der Würfelseiten im 3D-Raum
Jetzt müssen wir jede Seite des Würfels im 3D-Raum positionieren. Um einen Würfel zu erstellen, müssen wir jede Seite in sechs verschiedenen Richtungen in einer Entfernung von der Hälfte der Würfelbreite (100px) vom Zentrum platzieren.
Wir werden CSS 3D-Transformationen verwenden, um dies zu erreichen:
translateZ() bewegt ein Element entlang der Z-Achse vorwärts oder rückwärts.
rotateX() dreht ein Element um die horizontale X-Achse.
rotateY() dreht ein Element um die vertikale Y-Achse.
Fügen wir das CSS hinzu, um jede Seite zu positionieren:
In der WebIDE, wenn style.css noch geöffnet ist, fügen Sie den folgenden CSS-Code am Ende der Datei hinzu:
/* Position each face of the cube */
.front {
background-color: #ff8a65; /* Coral */
transform: translateZ(100px);
/* Moves the front face 100px towards the viewer */
}
.back {
background-color: #4fc3f7; /* Light Blue */
transform: rotateY(180deg) translateZ(100px);
/* Rotates 180° around Y-axis and moves 100px forward */
}
.right {
background-color: #81c784; /* Light Green */
transform: rotateY(90deg) translateZ(100px);
/* Rotates 90° right around Y-axis and moves 100px forward */
}
.left {
background-color: #9575cd; /* Purple */
transform: rotateY(-90deg) translateZ(100px);
/* Rotates 90° left around Y-axis and moves 100px forward */
}
.top {
background-color: #ffb74d; /* Orange */
transform: rotateX(90deg) translateZ(100px);
/* Rotates 90° upward around X-axis and moves 100px forward */
}
.bottom {
background-color: #f06292; /* Pink */
transform: rotateX(-90deg) translateZ(100px);
/* Rotates 90° downward around X-axis and moves 100px forward */
}
Lassen Sie uns verstehen, was dieses CSS tut:
Wir geben jeder Seite eine andere Hintergrundfarbe, um sie visuell zu unterscheiden.
Für jede Seite wenden wir eine spezifische Transformation an, um sie korrekt zu positionieren:
Die Vorderseite wird einfach 100px entlang der Z-Achse in Richtung des Betrachters bewegt.
Die Rückseite wird um 180° um die Y-Achse gedreht und 100px vorwärts bewegt.
Die Rechte Seite wird um 90° im Uhrzeigersinn um die Y-Achse gedreht und 100px vorwärts bewegt.
Die Linke Seite wird um 90° gegen den Uhrzeigersinn um die Y-Achse gedreht und 100px vorwärts bewegt.
Die Oberseite wird um 90° nach oben um die X-Achse gedreht und 100px vorwärts bewegt.
Die Unterseite wird um 90° nach unten um die X-Achse gedreht und 100px vorwärts bewegt.
Aktualisieren Sie jetzt Ihren Browser-Tab, um die Änderungen zu sehen. Sie sollten die Vorderseite des Würfels sehen können. Der Würfel dreht sich jedoch noch nicht, sodass Sie die anderen Seiten nicht sehen können. Wir werden die Drehanimation im nächsten Schritt hinzufügen.
Wie 3D-Transformationen funktionieren:
Wenn wir eine rotateY(90deg)-Transformation anwenden, drehen wir das Element im Wesentlichen um 90 Grad um die Y-Achse (vertikale Achse), sodass es nach rechts zeigt.
Nach der Drehung, wenn wir translateZ(100px) anwenden, bewegen wir das Element 100px in die Richtung, in die es jetzt zeigt (was je nach vorherigen Drehungen jede Richtung sein kann).
Durch die Kombination dieser Transformationen können wir jede Seite an die richtige Position und Ausrichtung bringen, um einen Würfel zu bilden.
Hinzufügen einer Animation zum Drehen des Würfels
Unser Würfel ist jetzt richtig konstruiert, aber er ist statisch. Um ihn interessanter zu gestalten, fügen wir eine Animation hinzu, damit der Würfel kontinuierlich im 3D-Raum dreht.
CSS-Animationen ermöglichen es uns, Bewegung auf Webseiten zu erstellen, ohne JavaScript zu verwenden. Wir werden eine Keyframe-Animation definieren und sie auf unseren Würfel anwenden.
In der WebIDE fügen Sie den folgenden CSS-Code am Ende Ihrer style.css-Datei hinzu:
/* Define the rotation animation */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
25% {
transform: rotateX(90deg) rotateY(90deg);
}
50% {
transform: rotateX(180deg) rotateY(180deg);
}
75% {
transform: rotateX(270deg) rotateY(270deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* Apply the animation to the cube */
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
/* 20s defines the duration of one complete rotation */
/* infinite means the animation will repeat forever */
/* linear means the animation speed is constant */
}
Lassen Sie uns dieses CSS verstehen:
Die @keyframes-Regel definiert eine Animation namens rotate.
Sie gibt an, wie das Element in verschiedenen Stadien der Animation aussehen sollte.
Bei 0% hat der Würfel keine Drehung.
Bei 25% hat der Würfel um 90 Grad auf beiden Achsen (X und Y) gedreht.
Bei 50% hat der Würfel um 180 Grad auf beiden Achsen gedreht.
Bei 75% hat der Würfel um 270 Grad auf beiden Achsen gedreht.
Bei 100% hat der Würfel eine volle 360-Grad-Drehung auf beiden Achsen abgeschlossen.
Wir aktualisieren den .cube-Selektor, um diese Animation anzuwenden:
animation: rotate 20s infinite linear wendet die rotate-Animation an.
Die Animation dauert 20 Sekunden pro vollständiger Drehung.
Sie wiederholt sich unendlich.
Die lineare Zeitfunktion sorgt für eine konstante Drehgeschwindigkeit.
Aktualisieren Sie jetzt Ihren Browser-Tab. Sie sollten sehen, wie Ihr Würfel reibungslos im 3D-Raum dreht und alle sechs farbigen Seiten zeigt, während er sich dreht.
Verständnis von CSS-Animationen:
CSS-Animationen bestehen aus zwei Komponenten: einem Stil, der die Animation beschreibt, und einer Reihe von Keyframes, die die Zustände der Animation zu verschiedenen Zeitpunkten definieren.
Die animation-Eigenschaft ist eine Abkürzung für mehrere Animations-Eigenschaften:
animation-name: Gibt den Namen der @keyframes-Regel an.
animation-duration: Gibt an, wie lange die Animation dauern soll, um einen Zyklus abzuschließen.
animation-timing-function: Definiert, wie die Animation während eines Zyklus fortschreitet.
animation-iteration-count: Gibt an, wie oft die Animation wiederholt werden soll.
Sie haben jetzt erfolgreich einen drehenden 3D-Würfel nur mit HTML und CSS erstellt. Dieses Beispiel zeigt die Macht von CSS 3D-Transformationen und Animationen für die Erstellung visuell ansprechender Web-Elemente, ohne dass JavaScript erforderlich ist.
Experimentieren Sie gerne mit verschiedenen Animationsdauern, verschiedenen Drehachsen oder sogar zusätzlichen Transformationen, um zu sehen, wie sie Ihren Würfel beeinflussen.
Coden ohne Setup – sofort loslegen.
Zusammenfassung
Herzlichen Glückwunsch, dass Sie das Lab "3D Rotierender Würfel" abgeschlossen haben. In diesem Lab haben Sie:
Eine HTML-Struktur mit sechs Seiten für einen 3D-Würfel erstellt.
CSS-Stile angewendet, um Elemente im 3D-Raum zu positionieren.
CSS 3D-Transformationen verwendet, um jede Seite korrekt im 3D-Raum zu platzieren.
CSS-Animationen hinzugefügt, um einen kontinuierlich rotierenden Würfel zu erstellen.
Dieses Projekt hat Ihnen mehrere wichtige CSS-Konzepte vorgestellt:
CSS 3D-Transformationen (translate, rotate)
Die perspective-Eigenschaft für 3D-Effekte
Die transform-style-Eigenschaft zum Beibehalten der 3D-Positionierung
CSS Keyframe-Animationen
Diese Konzepte sind leistungsstarke Werkzeuge für die Erstellung ansprechender, interaktiver Web-Interfaces, ohne auf JavaScript angewiesen zu sein. Sie können diese Techniken anwenden, um verschiedene 3D-Elemente zu erstellen, von einfachen rotierenden Karten bis hin zu komplexen 3D-Modellen.
Als Erweiterung dieses Projekts können Sie erwägen:
Das Hinzufügen von Hover-Effekten, um die Animation anzuhalten, wenn der Benutzer mit der Maus über den Würfel fährt.
Das Hinzufügen von Bildern oder komplexeren Inhalten zu jeder Seite.
Das Erstellen unterschiedlicher Animationspfade durch die Modifikation der Keyframes.
Das Experimentieren mit verschiedenen Größen, Farben und Drehgeschwindigkeiten.
Denken Sie daran, dass modernes CSS äußerst leistungsstark für die Erstellung visueller Effekte ist, und viele Animationen, die früher JavaScript erforderten, können jetzt allein mit CSS realisiert werden, was zu einer besseren Leistung und einem einfacheren Code führt.
"
As someone who is completely new to this type of work, this information is vital. It can be really hard and expensive to just pay for courses that basically yeild no results. This is an amazing tool and website for anyone but especially newbies like myself. THANK YOU!"
