CSS - 3D-Transformationen: Tiefe in Ihre Web-Designs bringen

Hallo, zukünftige Web-Designer! Heute begeben wir uns auf eine aufregende Reise in die Welt der CSS 3D-Transformationen. Als Ihr freundlicher Nachbar-Computerlehrer bin ich begeistert, Sie durch dieses faszinierende Thema zu führen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – wir beginnen mit den Grundlagen und arbeiten uns hoch. Am Ende dieses Unterrichts werden Sie 3D-Meisterwerke erstellen, die Ihre Websites zum Leben erwecken!

Was sind CSS 3D-Transformationen?

Stellen Sie sich vor, Sie halten ein Blatt Papier. In der Welt des Webdesigns ist das Ihre typische 2D-Webseite. Was wäre, wenn Sie dieses Papier falten, drehen oder hochwerfen könnten? Genau das ermöglichen uns CSS 3D-Transformationen mit unseren Web-Elementen!

CSS 3D-Transformationen geben uns die Macht, Elemente im dreidimensionalen Raum zu manipulieren. Wir können Elemente um die X-, Y- und Z-Achsen drehen, verschieben (bewegen) und skalieren. Die Z-Achse ist das, was unseren Designs Tiefe verleiht, und lässt Elemente näher oder weiter entfernt erscheinen.

Die Bühne bereiten: Die Transform-Property

Bevor wir in die 3D-Welt eintauchen, lassen Sie uns schnell die transform-Property复查. Dies ist der magische Zauberstab, den wir verwenden, um unsere 3D-Transformationen anzuwenden.

.element {
transform: function(value);
}

In dieser Syntax ist function die Art der Transformation, die wir anwenden möchten, und value ist, wie stark wir das Element transformieren möchten.

Die Transformationen-Funktionen

Nun schauen wir uns die Haupt-3D-Transformationen an, die wir zur Verfügung haben:

Funktion	Beschreibung	Beispiel
translate3d(x,y,z)	Verschiebt ein Element im 3D-Raum	transform: translate3d(10px, 20px, 30px);
translateZ(z)	Verschiebt ein Element entlang der Z-Achse	transform: translateZ(30px);
scale3d(x,y,z)	Skaliert ein Element im 3D-Raum	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	Skaliert ein Element entlang der Z-Achse	transform: scaleZ(2);
rotate3d(x,y,z,angle)	Dreht ein Element im 3D-Raum	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	Dreht ein Element um die X-Achse	transform: rotateX(45deg);
rotateY(angle)	Dreht ein Element um die Y-Achse	transform: rotateY(45deg);
rotateZ(angle)	Dreht ein Element um die Z-Achse	transform: rotateZ(45deg);
perspective(n)	Setzt die Perspektiveansicht	transform: perspective(1000px);

Machen Sie sich keine Sorgen, wenn das überwältigend aussieht – wir werden jeden einzelnen mit Beispielen durchgehen!

Los geht's mit den Transformationen!

Translation im 3D

Lassen Sie uns mit dem Verschieben von Elementen im 3D-Raum mit translate3d beginnen:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate3d(50px, 30px, 20px);
}

In diesem Beispiel bewegt sich unsere Box 50px nach rechts, 30px nach unten und 20px towards den Betrachter. Es ist, als schwebt die Box vor dem Bildschirm!

Skalierung im 3D

Nun machen wir unsere Box größer oder kleiner im 3D-Raum:

.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale3d(1.5, 1.5, 2);
}

Diese Transformation macht unsere Box 1,5 Mal breiter und höher und verdoppelt die Tiefe.

Drehung im 3D

Das Drehen von Elementen im 3D kann einige wirklich coole Effekte erzeugen:

.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

Diese Box führt einen kleinen Tanz auf, dreht sich um 45 Grad um die X-Achse, um 30 Grad um die Y-Achse und um 60 Grad um die Z-Achse!

Die Bedeutung der Perspektive

Nun wird es wirklich interessant. Um 3D-Transformationen wirklich zu schätzen, müssen wir Perspektive hinzufügen. Denken Sie an die Perspektive als die Distanz zwischen Betrachter und Objekt.

.container {
perspective: 1000px;
}

.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg);
}

In diesem Beispiel haben wir der Kontainer Perspektive hinzugefügt. Wenn wir nun die Box drehen, sieht sie dreidimensionaler aus!

Alles zusammenbringen: Ein 3D-Würfel

Lassen Sie uns alles, was wir gelernt haben, kombinieren, um einen 3D-Würfel zu erstellen:

<div class="scene">
<div class="cube">
<div class="face front">Vorne</div>
<div class="face back">Hinten</div>
<div class="face right">Rechts</div>
<div class="face left">Links</div>
<div class="face top">Oben</div>
<div class="face bottom">Unten</div>
</div>
</div>

.scene {
width: 200px;
height: 200px;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

Dieser Code erstellt einen bunten 3D-Würfel, der sich dreht, wenn Sie darüber hinwegfahren. Ganz cool, oder?

Fazit

Und das war's, Leute! Wir haben die aufregende Welt der CSS 3D-Transformationen bereist. Von einfachen Translationen bis hin zur Erstellung eines vollständigen 3D-Würfels haben Sie nun die Macht, Tiefe und Dimensionen in Ihre Web-Designs zu bringen.

Denken Sie daran, der Schlüssel zum Beherrschen von 3D-Transformationen ist die Übung. Scheuen Sie sich nicht, mit verschiedenen Werten und Kombinationen zu experimentieren. Wer weiß? Vielleicht erstellen Sie das nächste große Ding im Webdesign!

Als wir unseren Abschluss machen, erinnere ich mich an ein Zitat des berühmten Architekten Frank Lloyd Wright: "Raum ist die Luft der Kunst." Mit CSS 3D-Transformationen haben Sie nun die Werkzeuge, um Leben in Ihre Web-Räume zu blasen. Also los, erschaffen Sie erstaunliche 3D-Erlebnisse!

Frohes Coden und möge Ihre Web-Designs stets Tiefe haben!

Credits: Image by storyset