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!