Key Takeaways

• CSS 3D-Transformationsfunktionen erm?glichen die Manipulation von HTML-Elementen in drei Dimensionen: die horizontale x-Achse, die vertikale y-Achse und die Tiefe Z-Achse. Dies umfasst Funktionen wie rotatex (), rotatey (), rotatez (), translate3d (), translatez (), scale3d () und Perspektive ().
• der Transformation Eigenschaft in CSS kann eine oder mehrere Funktionen zugewiesen werden, um Transformationen auf ein Element anzuwenden. Mehrere Transformationen k?nnen durch r?umlich getrennte Funktionen definiert werden. Die Eigenschaft im Transformation im Stil kann standardm??ig auf flach eingestellt werden, um die Kinderelemente im 3D-Raum zu positionieren.
• CSS 3D -Transformationen werden von allen modernen Browsern unterstützt, aber es gibt einige Ausnahmen. Zum Beispiel unterstützt Internet Explorer das Transform-Stil nicht: Preserve-3D, was es unm?glich macht, eine 3D-Szene zu erstellen. Safari erfordert die Verwendung von Herstellern-Webkit-Backface-Sicht, um die hinteren Fl?chen auszublenden.
• Die Perspektive Eigenschaft in CSS 3D -Transformationen definiert, wie weit das Objekt vom Betrachter entfernt ist und die Illusion der Tiefe erzeugt. Je kleiner die Perspektivl?nge ist, desto n?her der Fluchtpunkt und desto st?rker der 3D -Effekt.

In diesem Artikel werde ich zeigen, wie Sie Ihren Webseiten und Anwendungen mit den neuen 3D -Transformationsfunktionen und -eigenschaften in CSS eine weitere Dimension hinzufügen. Wir werden Transformation, Translate, Rotations, Skalierung, Perspektive und mehr sowie Probleme mit Z-Index, Browser Gotchas und den besten Anwendungsf?llen für diese Funktionen betrachten.

.

HTML -Elemente k?nnen in drei Dimensionen transformiert werden:

Die horizontale x-Achse
die vertikale y-Achse und
Die Tiefe z-Achse

Auf einem zweidimensionalen Bildschirm ist es nützlich, sich an die Oberfl?che zu überlegen, die Koordinate Null ist. Ein positiver Z-Wert bewegt ein Objekt (vor dem Bildschirm) ein Objekt, w?hrend ein negativer Z-Wert ein Objekt weg (hinter dem Bildschirm) bewegt. Wenn die Perspektive hinzugefügt wird, kann ein entfernterer Z-Wert das Objekt vollst?ndig verschwinden.

Es gibt hier einige Dinge zu beachten:

1. CSS k?nnen nur zweidimensionale HTML-Elemente im dreidimensionalen Raum transformieren. Die Elemente selbst bleiben flach und haben keine Tiefe. Es ist m?glich, in der Z-Ebene zu skalieren, aber das wird ein Quadrat nicht in einen Würfel extrudieren. Sie k?nnen immer noch einen Würfel erstellen, ben?tigen aber sechs Elemente, um jede Seite zu machen.
CSS 3D -Transformationen eignen sich hervorragend für Seiteneffekte. Erwarten Sie jedoch nicht, dass Sie den n?chsten Minecraft oder Call of Duty erstellen k?nnen. Komplexe Modelle werden mithilfe einer Technologie wie Webgl.
2. besser implementiert

3D-Transformationen sind in allen modernen Browsern gut unterstützt (IE10), aber:

• Internet Explorer unterstützt kein Transform-Stil: Preserve-3D, was es unm?glich macht, eine 3D-Szene zu erstellen.
• Alle Versionen von Safari müssen die von Lieferanten vorgefertigte Webkit-Backface-Sichtweise verwenden, um die hinteren Fl?chen zu verbergen. Alle anderen Browser unterstützen die Backface-Sichtbarkeit.

Die folgenden Abschnitte beschreiben die 3D -Transformationseigenschaften und -funktionen. Die Demonstrationsseite zeigt, wie die meisten verwendet werden.

Die Transformation Eigenschaft

Jedes Element kann eine einzelne Transformationseigenschaft angewendet haben. Es kann eine Funktion mit einem oder mehreren Parametern zugewiesen werden. Zum Beispiel:

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

Wenn zwei oder mehr Transformationen erforderlich sind, k?nnen eine beliebige Anzahl von platz getrennten Funktionen definiert werden:

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

Zum Beispiel in der horizontalen Ebene skalieren und vertikal transformieren:

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

schlie?lich Transformation: Keine; Entfernt alle vorhandenen Transformationen.

übersetzungsfunktionen

Sie haben m?glicherweise Funktionen verwendet, um ein Element horizontal entlang der x -Achse oder vertikal entlang der y -Achse zu bewegen:

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

kann jede L?ngeeinheit verwendet werden. Prozents?tze verweisen auf die Gr??e des transformierten Elements, so dass ein 100px -Hochblock mit Translatey (80%) es um 80 Pixel bewegt.

In der dritten Dimension k?nnen wir auch TranslateZ verwenden:

<span>transform: translateZ(-200px);      /* 200px 'into' the screen */
</span>

Drei Elemente, #Box1, #Box2 und #Box3, absolut an derselben Stelle positioniert, mit TranslateZ (-200px), die auf #Box2 angewendet und translatez (-400px) angewendet wird, die auf #Box3 angewendet werden. Das Ergebnis ist ziemlich uninspirierend:

Wenn wir jedoch den gesamten ?u?eren #scene-Beh?lter drehen, werden die Z-Achse-Transformationen offensichtlicher:

<span><span>#scene</span> {
</span>  <span>transform-style: preserve-3d;
</span>  <span>transform: rotateX(-10deg) rotateY(-10deg);
</span><span>}
</span>

Die Shorthand Translate3D -Funktion erm?glicht es entsprechend:

, ein Element entlang aller drei Achsen bewegt zu werden:

<span>transform: translate3d(50px, 100%, 7em); /* x, y, z axis */
</span>

Eigenschaft im Transformation im Stil

standardm??ig (und immer im IE) ist das Transformationsstil auf flach eingestellt. Dies weist darauf hin, dass alle transformierten Kinder eines Elements in der Ebene des Elements selbst liegen. Mit anderen Worten, innere Elemente k?nnten jede Transformation angewendet haben, aber sie würden in die flache Ebene des Beh?lters gedrückt:

In den meisten Situationen transformiertes Stil: Preserve-3D; Muss verwendet werden, um anzuzeigen, dass die untergeordneten Elemente im 3D -Raum positioniert sind, und jede Transformation des Beh?lters transformiert alle entsprechend.

Rotationsfunktionen

Die 2D rotate () -Funktion dreht tats?chlich Elemente um die Z-Achse und ist identisch mit rotatez (). Zum Beispiel:

<span>transform: rotateZ(45deg); /* or rotate(45deg) */
</span>

rotatex () dreht sich um die horizontale Achse und rotatey () um die vertikale.

Winkel k?nnen in: definiert werden

• drehen - z. 0,5 Turns ist ein halbes Kurven im Uhrzeigersinn
• Grad, z. 90DEG ist ein Vierteldrehung im Uhrzeigersinn
• rad - Radians, z. -3.1416rad ist eine halbe Runde gegen den Uhrzeigersinn
• Gradians. Eine vollst?ndige Kurve betr?gt 400 Grad, also -200 -Grad ist eine halbe Runde gegen den Uhrzeigersinn.

drei Rotationsachsen k?nnen mit der Funktion rotate3d () eingestellt werden. Etwas verwirrend akzeptiert es vier Werte, die einen Vektor beschreiben:

• x-Die x-Koordinate des Vektors, der die Rotationsachse bezeichnet (0 bis 1).
• y-die y-Koordinate des Vektors, der die Rotationsachse bezeichnet (0 bis 1).
• z-Die Z-Koordinate des Vektors, der die Rotationsachse bezeichnet (0 bis 1).
• a - Der Drehwinkel. Ein positiver Winkel bedeutet im Uhrzeigersinn und negativ ist gegen den Uhrzeigersinn.

mathematische Masochisten k?nnen vollst?ndige Details von rotate3d () bei mdn.

lesen

Skalierung (Gr??e) Funktionen

Die Funktionen scalex () und scaley () dehnen oder verkleinern ein Element in den horizontalen und vertikalen Ebenen entsprechend:

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

scalez () macht dasselbe für die Tiefenebene. Im obigen Beispiel Transformation: Scalez (0,5); Reduziert daher den Abstand zwischen jedem Element um die H?lfte.

Die Funktion Scale3D (x, y, z) kann in einem Befehl die Skalierung in allen Ebenen anwenden. Zum Beispiel:

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

Transformation Origin

standardm??ig wird ein Element um seinen Mittelpunkt umgedreht und skaliert. Dies kann ge?ndert werden, indem Transformationsorientierungen mit bis zu drei platzgetrennten Werten festgelegt werden:

• Ein-Wert-Syntax: eine L?nge oder einen Prozentsatz des X-Ursprungs. Ein einzelnes Schlüsselwort für linke, Mitte, rechts, obere oder untere Schlüssel kann auch verwendet werden, wenn oben und unten den Y -Ursprung mit einem Mitte X -Ursprung festgelegt werden.
• Zwei-Wert-Syntax: Die X- und Y-Ursprünge. Eine L?nge, ein Prozentsatz oder ein Schlüsselwort kann verwendet werden.
• Drei-Wert-Syntax: Die Ursprünge x, y und z. Der Z -Wert kann nur eine L?ngeeinheit wie PX oder EM sein.

Einer Ursprung beeinflusst die Rotationsebene der anderen. Zum Beispiel Transform-Origin: Left Center 0; bewegt den Ursprung in die Mitte der linken Kante. Dies wirkt sich auf rotatey () und rotatez () -Funktionen aus.

Backface -Sichtbarkeit

Die Rückseite eines Elements wird angezeigt, wenn es um die x- oder y -Achse um mehr als 90, jedoch weniger als 270 Grad in beide Richtungen gedreht wird. Das Heck ist effektiv ein Spiegelbild und standardm??ig sichtbar.

Das Heck kann versteckt werden, indem die Backface-Sichtbarkeit versteckt ist: versteckt; - Wenn es auf #Box2:

angewendet wird

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

Backface-Sicht: versteckt; wird oft für Kartenflippungsanimationen verwendet, bei denen zwei Elemente die Vorder- und Rückseite einer Karte zeigen, aber nur einer kann jeweils sichtbar sein.

Perspektive

Die oben gezeigten Beispiele geben keine Perspektive an. Ein Element, das sich tiefer in die Z -Ebene bewegt, bleibt die gleiche Gr??e, egal wie weit es vom Betrachter entfernt ist. Die Perspektive -Eigenschaft stand nicht, aber sie kann auf eine positive L?nge eingestellt werden. Zum Beispiel:

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

Je kleiner die Perspektivl?nge, desto n?her der Fluchtpunkt und desto st?rker der 3D -Effekt:

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

Perspektive Fluchtpunkt

standardm??ig steht der Perspektive -Fluchtpunkt in der Mitte des transformierenden Elements. Es kann ge?ndert werden, indem Perspektiven einstellen: x y;, wobei:

• x ist ein Schlüsselwort (links, Mitte oder rechts) oder ein Prozentsatz im Vergleich zur Breite des Elements (0%, 50% und 100% entsprechen den Schlüsselw?rtern).
• y ist ein Schlüsselwort (obere, mittlere oder unten) oder ein Prozentsatz in Bezug auf die H?he des Elements (0%, 50% und 100% entsprechen den Schlüsselw?rtern).

Top-links-Fluchtpunkt:

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

unterer rechtsgerechter Fluchtpunkt:

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

Es gibt auch eine Perspektive () Funktion () - zum Untersuchung, Transformation: Perspektive (200px). Es scheint jedoch keine Perspektiven zu respektieren.

Alles zusammen jetzt

Schlie?lich k?nnen Skalierung, Rotation und Translation in einer einzelnen Matrix3d ??() -Funktion definiert werden, die nicht weniger als 16 Werte für eine dreidimensionale Affine-Transformation erfordert.

Dies wird wahrscheinlich am besten in JavaScript verwendet und von denen mit einem Abschluss in Geometrie versucht! Für CSS ist eine Liste von Transformationsfunktionen wahrscheinlich lesbarer und wartbarer.

Weiteres Lesen

in drei Dimensionen arbeiten k?nnen konzeptionell schwierig sein, aber CSS -Transformationen sind ein einfacher Weg zur Objektmanipulation. Die Demonstrationsseite bietet ein interaktives Tool, mit dem Sie verstehen k?nnen, wie die Eigenschaften und Funktionen zusammenarbeiten.

Sie finden atemberaubende Beispiele für CSS-3D-Transformationen, einschlie?lich Virtual-Reality-Zuschauer, Schützen aus der ersten Person, Bildgalerien und Star Wars Scrolling-Text. Viele sind Proof-of-Concept-Demonstrationen, die in typischen Projekten wahrscheinlich nicht verwendet werden. Ein paar subtile, progressiv verbesserte 3D-Effekte k?nnen Ihren Webseiten und Anwendungen jedoch eine weitere Dimension verleihen.

• mdn unter Verwendung von CSS -Transformationen
• CSS transformiert das Modul
• Einführung in CSS 3D -Transformationen

h?ufig gestellte Fragen zu CSS 3D -Transformationsfunktionen

Was sind die grundlegenden 3D-Transformationsfunktionen in CSS? Die grundlegenden Funktionen umfassen rotatex (), rotatey (), rotatez (), translate3d (), translatez (), scale3d () und Perspektive (). Jede Funktion hat einen einzigartigen Effekt auf das Element. Zum Beispiel dreht Rotatex () das Element um die x-Achse, w?hrend TranslateZ () das Element entlang der Z-Achse bewegt. Diese Funktionen k?nnen kombiniert werden, um komplexe 3D -Transformationen zu erstellen.

Wie funktioniert die Perspektive () -Funktion in CSS 3D -Transformationen? ist weg vom Benutzer. Es schafft die Illusion von Tiefe und Perspektive in einem 3D-transformierten Element. Die Funktion nimmt einen Parameter vor, der der Perspektivwert in Pixeln ist. Ein niedrigerer Wert erzeugt einen ausgepr?gteren Perspektiveffekt als ein h?herer Wert.

Kann ich mehrere 3D -Transformationsfunktionen in CSS kombinieren? Dies geschieht durch die Auflistung jeder Funktion, die durch einen Raum in der Transformationseigenschaft getrennt ist. Die Funktionen werden in der Reihenfolge angewendet, die sie aufgeführt sind. Auf diese Weise k?nnen Sie komplexe 3D -Effekte erzeugen, indem Sie Rotationen, Translationen und Skalierung kombinieren. CSS ist die Dimension, in der die Transformationen auftreten. 2D-Transformationen beeinflussen Elemente in den X- und Y-Achsen, w?hrend 3D-Transformationen auch die Z-Achse enthalten, wodurch die Transformationen Tiefe verleihen. Dies bedeutet, dass 3D -Transformationen Elemente in drei Dimensionen drehen, bewegen und skalieren k?nnen, wodurch ein eindringlicherer und dynamischer Effekt erzeugt wird. Die Eigenschaft der Backface-Sichtsbarkeit in CSS steuert, ob die Rückseite eines Elements sichtbar ist, wenn der Betrachter nicht antritt. Diese Eigenschaft ist besonders nützlich in 3D -Transformationen, bei denen sich ein Element dreht und seine hintere Gesicht sichtbar wird. Die Eigenschaft nimmt zwei Werte an: ?sichtbar“, die die hintere Gesicht zeigt, und ?versteckt“, was es verbirgt. ??> Mit der Transform-Origin-Eigenschaft in CSS 3D-Transformationen k?nnen Sie den Ursprung für die Transformationen angeben. Standardm??ig stammen die Transformationen aus dem Zentrum des Elements. Sie k?nnen dies jedoch unter Verwendung der Transform-Origin-Eigenschaft auf jeden Punkt innerhalb des Elements ?ndern. Diese Eigenschaft ben?tigt zwei oder drei Werte, die x, y und optional die Z -Achse darstellen.

Kann ich CSS 3D -Transformationen animieren? Auf diese Weise k?nnen Sie reibungslose, allm?hliche Transformationen erstellen, die die Benutzererfahrung verbessern. Sie k?nnen die Dauer, die Timing -Funktion und die Verz?gerung der Animation unter Verwendung der jeweiligen CSS -Eigenschaften steuern.

Werden CSS 3D -Transformationen in allen Browsern unterstützt? Es ist jedoch immer eine gute Idee, die spezifische Browser -Unterstützung für jede Funktion zu überprüfen, da einige ?ltere Versionen m?glicherweise nicht alle Funktionen vollst?ndig unterstützen. Sie k?nnen Tools wie kann ich verwenden, um die aktuelle Browser -Unterstützung für CSS -3D -Transformationen zu überprüfen. Erstellt mit CSS 3D -Transformationen durch Kombination der Funktion rotatey () oder rotatex () mit einem übergang. Die Drehfunktion dreht das Element um seine Y- oder X -Achse, w?hrend der übergang die flippende Animation erstellt. Sie k?nnen die Geschwindigkeit und den Zeitpunkt des Flips mithilfe der Eigenschaften der übergangsdauer und der übergangs-Timing-Funktion steuern. ) Die Funktion in CSS 3D -Transformationen erm?glicht es Ihnen, eine 4 × 4 -Transformationsmatrix mit 16 Werten anzugeben. Diese Funktion kann jede 3D -Transformation darstellen, was sie zu einem leistungsstarken Werkzeug zum Erstellen komplexer 3D -Effekte macht. Es kann jedoch ziemlich komplex sein, zu verwenden, da es ein tiefes Verst?ndnis der Matrixmathematik erfordert.

Das obige ist der detaillierte Inhalt von3D -Transformationsfunktionen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!