3D -Transformationsfunktionen in CSS

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!