Wie die CSS -Perspektive funktioniert

CSS -Animationsbegeisterte verwenden oft das leistungsstarke Tool der Perspektive. Während die Perspektive Eigenschaft selbst keine 3D -Effekte erzielen kann (da die Basisform keine Tiefe hat), können Sie transform verwenden, um Objekte im 3D -Raum (x, y und z -Achse) zu bewegen und zu drehen, und dann die Perspektive verwenden, um die Tiefe zu steuern.

Dieser Artikel beginnt mit den Grundlagen, erklärt allmählich das Konzept der Perspektive und erstellt schließlich eine vollständige 3D -rotierende Würfelanimation.

Perspektive Grundlagen

Wir beginnen mit einem einfachen grünen Quadrat und bewegen es auf drei Achsen.

Das Bewegen eines Objekts auf die X- und Y -Achsen ist sehr einfach, aber wenn Sie es auf die Z -Achsen bewegen, sieht es so aus, als ob das Quadrat gleich bleibt. Dies liegt daran, dass die Animation es näher zu uns und dann von uns wegbringt, wenn sich das Objekt auf der Z -Achse bewegt, aber die Größe (und die Position) des Quadrats bleibt gleich. Hier kommt das CSS perspective -Attribut ins Spiel.

Während die Perspektive keinen Einfluss hat, wenn sich das Objekt auf der X- oder Y -Achse bewegt, lässt die Perspektive das Quadrat größer aussehen, wenn es uns in der Nähe ist und kleiner ist, wenn es weit von uns entfernt ist. Ja, genau wie im wirklichen Leben.

Der gleiche Effekt tritt auch auf, wenn wir das Objekt drehen:

Das Drehen eines Quadrats auf der Z -Achse sieht aus wie eine regelmäßige Drehung, mit der wir alle vertraut sind und lieben, aber wenn wir ein Quadrat auf der X- oder Y -Achse (ohne Perspektive) drehen, sieht es so aus, als würde das Quadrat einfach kleiner (oder schmaler) als drehen. Wenn wir jedoch die Perspektive hinzufügen, können wir sehen, dass die ferne Seite kleiner aussieht und die Rotation wie erwartet aussieht, wenn sich das Quadrat dreht.

Beachten Sie, dass wenn sich das Objekt in einem Winkel von 90 ° auf der x- oder y -Achse (oder 270 °, 450 °, 630 ° usw.) dreht, "verschwindet" aus der Sicht. Auch dies liegt daran, dass wir dem Objekt keine Tiefe hinzufügen können, und an dieser Position beträgt die Breite (oder Höhe) des Quadrats tatsächlich 0.

Perspektivwert

Wir müssen einen Wert verwenden, um perspective Perspektiveigenschaft festzulegen. Dieser Wert legt den Abstand der Objektebene oder mit anderen Worten die Intensität der Perspektive fest. Je größer der Wert ist, desto weiter sind Sie vom Objekt; Je kleiner der Wert ist, desto offensichtlicher ist der Perspektiveffekt.

Perspektive des Ursprungs

perspective-origin bestimmt die Ausrichtung Ihres "Beobachtungs" -Objekts. Wenn der Ursprung zentriert ist (dies ist die Standardeinstellung) und das Objekt nach rechts bewegt, sieht es so aus, als würden Sie ihn von links (und umgekehrt) beobachten.

Alternativ können Sie das Objekt zentrieren und perspective-origin bewegen. Wenn der Ursprung zur Seite eingestellt ist, ist es so, als ob Sie das Objekt von dieser Seite "beobachten". Je größer der Wert ist, desto mehr schaut er aus dem Zentrum.

Verwandeln

Während sowohl perspective als auch perspective-origin auf den übergeordneten Container des Elements eingestellt sind und die Position des Fluchtpunkts bestimmen (d. H. Die Entfernung von dem Ort, an dem Sie das Objekt zur Objektebene "beobachten"), werden die Verschiebung und Drehung des Objekts unter Verwendung der transform festgelegt, die auf dem Objekt selbst deklariert wird.

Wenn Sie translateX() den Code aus dem vorherigen Beispiel ansehen, bewege ich das Quadrat von einer Seite zur anderen. Beachten Sie jedoch, dass es der transform zugeordnet ist. Diese Funktion ist ein Transformationstyp, der direkt auf das Element angewendet wird, das wir konvertieren möchten, aber sein Verhalten entspricht den perspektivischen Regeln, die dem übergeordneten Element zugewiesen sind.

Wir können mehrere Funktionen "verknüpfen", um Eigenschaften zu transform . Bei Verwendung mehrerer Transformationen sind jedoch drei sehr wichtige Dinge zu berücksichtigen:

1. Wenn ein Objekt gedreht ist, ändert sich sein Koordinatensystem mit dem Objekt.
2. Wenn Sie ein Objekt übersetzen, verschiebt es sich relativ zu einem eigenen Koordinatensystem (und nicht zu seiner übergeordneten Koordinate).
3. Die Reihenfolge, in der diese Werte geschrieben sind, ändern das Endergebnis.

Um den Effekt zu erzielen, den ich in der vorherigen Demo wollte, muss ich das Quadrat auf die X-Achse übersetzen. Nur dann kann ich es drehen. Wenn Sie dies in umgekehrter Reihenfolge tun (zuerst drehen, dann übersetzen), ist das Ergebnis völlig anders.

Um die Bedeutung der Wertreihenfolge für transform von Eigenschaften zu betonen, schauen wir uns einige einfache Beispiele an. Erstens handelt es sich um eine einfache zweidimensionale (2D) Transformation von zwei Quadraten, die beide die gleichen Transformationswerte haben, jedoch in verschiedenen Erklärungsordnungen:

Das Gleiche gilt auch dann, wenn wir das Quadrat auf der Y -Achse drehen:

Es ist zu beachten, dass wir zwar wichtig sind, obwohl die Reihenfolge der Werte wichtig ist, aber einfach die Werte selbst ändern können, um das gewünschte Ergebnis zu erhalten, anstatt die Reihenfolge der Werte zu ändern. Zum Beispiel……

 <code>transform: translateX(100px) rotateY(90deg);</code>

... der gleiche Effekt wie der folgende:

 <code>transform: rotateY(90deg) translateZ(100px);</code>

Dies liegt daran, dass wir in der ersten Zeile das Objekt auf die x-Achse verschoben haben, bevor wir das Objekt drehen, aber in der zweiten Reihe haben wir das Objekt gedreht, seine Koordinaten geändert und es dann auf die Z-Achse bewegt. Gleiches Ergebnis, unterschiedliche Werte.

Lassen Sie uns etwas Interessanteres sehen

Natürlich sind Quadrate eine großartige Möglichkeit, das allgemeine Konzept der Perspektive zu erklären, aber wenn wir es in dreidimensionale (3D-) Formen zerlegen, können wir wirklich sehen, wie die Perspektive funktioniert.

Lassen Sie uns einen 3D -Würfel mit allem bauen, was wir bisher abgedeckt haben.

Html

Wir werden ein .container -Element erstellen, das sich um ein .cube -Element dreht, .cube sechs Elemente enthält, die die sechs Gesichter des Würfels darstellen.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

Universal CSS

Zunächst werden wir dem .container über eine Perspektive hinzufügen. Wir werden dann sicherstellen, dass das .cube -Element eine Seitenlänge von 200px hat und sich an die 3D -Transformation halten. Ich habe hier einige Ausdrucksstile hinzugefügt, aber die wichtigsten Attribute werden hervorgehoben.

 /* Elterncontainer mit Perspektive*//
.Container {
  Breite: 400px;
  Höhe: 400px;
  Grenze: 2px fest weiß;
  Border-Radius: 4px;
  Anzeige: Flex;
  Justify-Content: Center;
  Ausrichtung: Zentrum;
  Perspektive: 800px;
  Perspektivenorientierter: Oben rechts;
}

/* Kinderelemente, 3D -Transformation beibehalten*/
.Cube {
  Position: Relativ;
  Breite: 200px;
  Höhe: 200px;
  Transform-Stil: Preserve-3d;
}

/* Die Oberfläche des Würfels, absolute Positionierung*/
.side {
  Position: absolut;
  Breite: 100%;
  Höhe: 100%;
  Opazität: 0,9;
  Grenze: 2px fest weiß;
}

/* Cube Face Hintergrundfarbe, hilft, die Arbeit zu visualisieren*/
.Front {Hintergrundfarbe: #D50000; }
.Back {Hintergrundfarbe: #aa00ff; }

.left {Hintergrundfarbe: #304ffe; }
.Right {Hintergrundfarbe: #0091ea; }

.top {Hintergrundfarbe: #00BFA5; }
.Bottom {Hintergrundfarbe: #64dd17; }

Oberfläche ändern

Die Front ist die einfachste. Wir bewegen es um 100px:

 .Front {
  Hintergrundfarbe: #D50000;
  Transformation: TranslateZ (100px);
}

Wir können die Rückseite des Würfels nach hinten bewegen, indem wir translateZ(-100px) hinzufügen. Eine andere Möglichkeit besteht darin, die Seite 180 Grad zu drehen und vorwärts zu bewegen:

 .zurück {
  Hintergrundfarbe: #aa00ff;
  Transformation: TranslateZ (-100px);

  /* oder */
  /* Transformation: Rotatey (180 °) TranslateZ (100px); */
}

Wie der Rücken können wir die linke und rechte Seite auf verschiedene Weise verwandeln:

 .links {
  Hintergrundfarbe: #304ffe;
  Transformation: Rotatey (90 °) TranslateZ (100px);

  /* oder */
  /* Transformation: Translatex (100px) rotatey (90 °); */
}

.Rechts {
  Hintergrundfarbe: #0091ea;
  Transformation: rotatey (-90de) translatez (100px);

  /* oder */
  /* Transformation: Translatex (-100px) rotatey (90 °); */
}

Die obere und unten sind etwas anders. Wir müssen sie nicht auf der Y -Achse drehen, wir müssen sie auf der X -Achse drehen. Auch hier kann es auf verschiedene Arten erfolgen:

 .Spitze {
  Hintergrundfarbe: #00BFA5;
  Transformation: rotatex (90 °) translatez (100px);

  /* oder */
  /* Transformation: Translatey (-100px) rotatex (90 °); */
}

.unten {
  Hintergrundfarbe: #64dd17;
  Transformation: rotatex (-90de) translatez (100px);

  /* oder */
  /* Transformation: Translatey (100px) rotatex (90 °); */
}

Dies gibt Ihnen einen 3D -Würfel!

Fühlen Sie sich frei, andere Optionen perspective und perspective-origin zu probieren und zu sehen, wie sie sich auf den Würfel auswirken. Es gibt keinen "korrekten" Wert, und diese Werte variieren je nach Element, da sie von der Animation, der Größe des Objekts und dem Effekt abhängen, den Sie erreichen möchten.

Sprechen wir über transform-style

Wir werden dem Würfel eine schöne Animation hinzufügen, aber lassen Sie uns zunächst über transform-style diskutieren. Ich habe es bereits in generischen CSS hinzugefügt, aber es erklärt nicht wirklich, was es ist oder was es tut.

transform-style hat zwei Werte:

• flat (Standardwert)
• preserve-3d

Wenn wir die Immobilie auf preserve-3d einstellen, macht es zwei wichtige Dinge:

1. Es sagt, dass das Gesicht des Würfels (Kinderelemente) im selben 3D -Raum wie der Würfel sein soll. Wenn es nicht auf preserve-3d eingestellt ist, ist der Standardwert flat und das Gesicht auf der Ebene des Würfels abgeflacht. preserve-3d "Kopieren" die Perspektive des Würfels auf seine Kinderelemente (Gesichter) und ermöglicht es uns, nur den Würfel zu drehen, sodass wir nicht jedes Gesicht separat animieren müssen.
2. Es zeigt Kinderelemente gemäß ihrer Position im 3D -Raum, unabhängig von ihrer Position im DOM.

In diesem Beispiel gibt es drei Quadrate - grün, rot und blau. Der translateZ -Wert des grünen Quadrats beträgt 100px, was bedeutet, dass es sich vor anderen Quadraten befindet. Das blaue Quadrat hat einen translateZ -Wert von -100px, was bedeutet, dass es sich hinter anderen Quadraten befindet.

Aber im Dom ist die Reihenfolge der Quadrate: grün, rot, blau. Wenn also transform-style auf flat eingestellt ist (oder überhaupt nicht), wird das blaue Quadrat oben angezeigt und das grüne Quadrat ist dahinter, da dies die Reihenfolge der DOM ist. Wenn wir jedoch transform-style auf preserve-3d einstellen, wird es gemäß seiner Position im 3D-Raum rendern. Infolgedessen befindet sich das grüne Quadrat vorne und das blaue Quadrat wird hinten sein.

Animation

Lassen Sie uns nun den Würfel animieren! Um die Dinge interessanter zu machen, fügen wir allen drei Äxten Animationen hinzu. Zunächst fügen wir die animation zu .cube hinzu. Es wird noch nichts tun, weil wir den Animations -Keyframe noch nicht definiert haben, aber wenn wir es tun, ist es vorhanden.

 Animation: Cuberotate 10S Linear Infinite;

Jetzt ist der Keyframe. Grundsätzlich wollen wir den Würfel entlang jeder Achse drehen, so dass er so aussieht, als würde er im Raum rollen.

 @keyframes cuberotate {
  aus {Transformation: rotatey (0deg) rotatex (720deg) rotatez (0deg); }
  zu {transformieren: rotatey (360deg) rotatex (0deg) rotatez (360de); }
}

perspective Eigenschaft ist eigentlich ein Attribut, das die Animationstiefe verleiht, genau wie wir sehen, wie der Würfel links und rechts und vorwärts und rückwärts scrollt.

Vorher waren die Werte des perspective konsistent, ebenso wie perspective-origin . Lassen Sie uns sehen, wie sich das Ändern dieser Werte auf das Erscheinungsbild des Würfels auswirkt.

Ich habe diesem Beispiel drei Schieberegler hinzugefügt, um zu sehen, wie sich unterschiedliche Werte auf die Perspektive des Würfels auswirken:

• Der Schieberegler auf der linken Seite legt den Wert perspective Perspektiveigenschaft fest. Denken Sie daran, dieser Wert legt die Entfernung zur Objektebene fest, je kleiner der Wert ist, desto offensichtlicher ist der Perspektiveffekt.
• Die anderen beiden Schieberegler beziehen sich auf perspective-origin . Der rechte Schieberegler stellt den Ursprung auf der vertikalen Achse von oben nach unten und der untere Schieberegler stellt den Ursprung auf der horizontalen Achse von rechts nach links.

Beachten Sie, dass diese Änderungen möglicherweise nicht offensichtlich sind, wenn die Animation ausgeführt wird, da sich der Würfel selbst dreht, aber Sie können die Animation leicht ausschalten, indem Sie auf die Schaltfläche Animation ausführen.

Fühlen Sie sich frei, diese Werte auszuprobieren und zu sehen, wie sie das Erscheinungsbild des Würfels beeinflussen. Es gibt keinen "korrekten" Wert, und diese Werte variieren je nach Element, da sie von der Animation, der Größe des Objekts und dem Effekt abhängen, den Sie erreichen möchten.

Nächste Schritte?

Jetzt, da Sie die Grundlagen perspective Attribute in CSS haben, können Sie Ihre Vorstellungskraft und Kreativität verwenden, um 3D -Objekte in Ihren eigenen Projekten zu erstellen, wodurch Sie Ihren Schaltflächen, Menüs, Eingaben und allem, was Sie noch dem Leben geben möchten, Tiefe und Spaß hinzufügen.

Gleichzeitig können Sie versuchen, komplexe Strukturen und perspektivische Animationen zu erstellen, um Ihre Fähigkeiten wie diese, dies, dies und sogar das zu üben und zu verbessern.

Ich hoffe, Sie haben es genossen, diesen Artikel zu lesen und dabei etwas Neues zu lernen! Fühlen Sie sich frei, einen Kommentar zu hinterlassen, um mich mitzuteilen, was Sie denken, oder ob Sie Fragen zu Perspektive oder anderen Themen in diesem Artikel haben, bitte hinterlassen Sie mir einen Kommentar auf Twitter.

Das obige ist der detaillierte Inhalt vonWie die CSS -Perspektive funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!