So verwenden Sie 2D -Transformationsfunktionen in CSS

Auszug aus Tiffanys neuem Buch "CSS Master, zweite Ausgabe"

CSS -Transformationsmerkmal bietet uns die Fähigkeit, Effekte und Interaktionen zu erzeugen, die andere Methoden nicht erreichen können. Wenn wir Übergänge und Animationen kombinieren, können wir Elemente und Schnittstellen erstellen, die sich drehen, tanzen und skalieren. Insbesondere die dreidimensionale Transformation kann physikalische Objekte simulieren. In diesem Artikel werden zweidimensionale Transformationsfunktionen untersucht (hier werden dreidimensionale Funktionen eingeführt).

Es gibt hauptsächlich vier Arten von zweidimensionalen Transformationsfunktionen: Rotation, Skalierung, Neigung und Verschiebung. Sechs weitere Funktionen ermöglichen es uns, Elemente entlang einer einzigen Dimension zu transformieren: Scalex und skaliert;

Schlüsselpunkte

• Die vier zweidimensionalen Transformationsfunktionen in CSS sind drehen, skalieren, schief und übersetzen. Diese Funktionen ermöglichen es uns, Effekte und Interaktionen zu erzeugen, die andere Methoden nicht erreichen können, einschließlich Elementen und Schnittstellen, die sich drehen, tanzen und skalieren.
Die Funktion
• rotate () dreht Elemente in einem bestimmten Winkel um das Transform-Origin. Kann im Uhrzeigersinn oder gegen den Uhrzeigersinn gedreht werden. Die Skalierungsfunktion kann die Größe eines Elements in der x -Dimension, der y -Dimension oder beides erhöhen oder verringern. Die Übersetzungsfunktion ist der Abstand zwischen der Zeichenposition des Elements und seiner Layoutposition durch den angegebenen Abstand.
• Transformationsfunktionen können kombiniert werden, um komplexere Transformationen zu erzeugen. Die Reihenfolge, in der diese Funktionen angewendet werden, ist jedoch wichtig, da sie das Ergebnis erheblich ändert. Dies liegt daran, dass der Browser die Matrix jeder Funktion durch das Erstellen einer neuen Matrix multipliziert.
• Die neueste Version der CSS -Transformationspezifikation fügt Transvers, Drehen und Skalierungsattribute zu CSS hinzu. Diese Eigenschaften funktionieren sehr ähnlich wie bei ihren entsprechenden Transformationsfunktionen, aber die Werte sind eher raums getrennte als an Kommas getrennte. Auf diese Weise können die Rotation, Übersetzung oder Skalierung von Transformationen einzeln aus anderen Transformationen verwaltet werden. Die Browser -Unterstützung für diese Eigenschaften ist jedoch immer noch begrenzt.

rotate ()

Rotationstransformation dreht die Elemente um das Transform-Origin in einem bestimmten Winkel. Verwenden Sie rotate (), um Elemente im Uhrzeigersinn (positiver Winkelwert) oder gegen den Uhrzeigersinn (negativer Winkelwert) zu neigen. Sein Effekt ist wie eine Windmühle oder Windrad, wie unten gezeigt.

Die Funktion

rotate () akzeptiert den Wert der Winkeleinheit. Winkeleinheiten werden durch CSS -Werte und Einheitsmodulstufe 3 definiert. Diese können Grad (Grad), Rad (Radian), Gradient (Gradient) oder Dreheneinheiten sein. Eine vollständige Rotation beträgt 360 Grad, 6,28rad, 400 Grad oder 1 Turn.

Sofern nicht animiert oder übergeführt, wird der Rotationswert, der eine Rotation überschreitet (z. B. 540 ° oder 1,5 Turn), basierend auf den verbleibenden Werten gerendert. Mit anderen Worten, der Rendering -Effekt von 540 ° C entspricht dem von 180 Grad (540 Grad minus 360 Grad), und der Rendering -Effekt von 1,5 Turn entspricht dem von 0,5 Turn (1,5 - 1). Übergänge oder Animationen von 0DEG zu 540 ° oder von 1 Drehung bis 1,5 drehen das Element eineinhalb Mal.

zweidimensionale Skalierungsfunktionen: Skalierung, Scalex und Skaly

Verwenden der Skalierungsfunktion können wir die Rendergröße eines Elements in der x -Dimension (scalex), die y -Dimension (skaliert) oder beides (Skala) erhöhen oder verringern. Die Skalierung ist in der folgenden Abbildung dargestellt, wobei der Rand die ursprüngliche Grenze des Box darstellt und die Zahl ihren Mittelpunkt angibt.

Jede Skalierungsfunktion akzeptiert einen Multiplikator oder einen Faktor als Parameter. Dieser Multiplikator kann fast jede positive oder negative Zahl sein. Prozentsatzwerte werden nicht unterstützt. Ein positiver Multiplikator von mehr als 1 erhöht die Größe des Elements. Beispielsweise erhöht Skala (1,5) die Größe eines Elements in den x- und y -Richtungen um das 1,5 -fache. Ein positiver Multiplikator zwischen 0 und 1 verringert die Größe des Elements.

Werte von weniger als 0 verursachen auch die Größe des Elements, um eine reflektierende (Flip) -Transformation zu skalieren oder zu verringern und zu erzeugen.

Warnung: Die Verwendung von Skala (0) lässt das Element verschwinden, da das Ergebnis der Multiplizierung der Zahl mit Null Null ist.

Erstellen Sie die Identitätstransformation unter Verwendung von Skala (1), was bedeutet, dass sie auf den Bildschirm gezogen wird, als ob keine Skalierungstransformation angewendet wird. Die Verwendung von Skala (-1) ändert nicht die Zeichnengröße des Elements, aber negative Werte werden dazu führen, dass das Element reflektiert wird. Auch wenn das Element die Transformation nicht anzeigt, löst es den neuen Stapelkontext aus und beinhaltet Blöcke.

Sie können die Skalierungsfunktion verwenden, um die x- und y -Dimensionen zu skalieren. Übergeben Sie einfach zwei Parameter: Skala (1,5, 2). Der erste Parameter skaliert die x -Dimension; Zum Beispiel können wir Skala (-1, 1) verwenden, um ein Objekt einzeln entlang der x-Achse zu reflektieren. Durch die Übergabe eines einzelnen Parameters werden zwei Dimensionen nach demselben Faktor skaliert.

zweidimensionale Übersetzungsfunktionen: Translatex, Translatey und Translate

Das Übersetzungselement setzt den Abstand zwischen seiner Zeichenposition und seiner Layoutposition um einen bestimmten Abstand aus. Wie bei anderen Transformationen ändert das Übersetzungselement seine OffsetLeft- oder Offsettop -Position nicht. Es beeinflusst jedoch seine visuelle Position auf dem Bildschirm.

Jede zweidimensionale Translationsfunktion (Translatex, Translatey und Translate) akzeptiert Länge oder Prozentsatz als Parameter. Zu den Längeneinheiten gehören Pixel (PX), EM, REM und Ansichtsfenster (VW und VH).

Translatex -Funktion ändert die horizontale Rendering -Position eines Elements. Wenn das Element von links 0 Pixel ist, bewegt TranssitionX (50px) seine Rendering -Position 50 Pixel rechts von seiner Ausgangsposition. In ähnlicher Weise verändert Translatey die vertikale Rendering -Position des Elements. Transitiony (50px) verschiebt das Element vertikal um 50 Pixel.

Verwenden von translate () können wir Elemente vertikal und horizontal mit einer einzelnen Funktion bewegen. Es akzeptiert bis zu zwei Parameter: den X -Übersetzungswert und den Y -Übersetzungswert. Die folgende Abbildung zeigt den Effekt eines Elements mit Translate -Transformationswert (120%, -50px), wobei sich das grüne Quadrat links in seiner ursprünglichen Position befindet, und das grüne Quadrat rechts wird horizontal um 120% mit seinem Element übersetzt (gestrichelter Rand) und vertikal um -50px übersetzt.

Ein einzelner Parameter zur Übersetzung entspricht der Verwendung von Translatex. Die Verwendung von Translate () ist eine prägnantere Wahl. Die Anwendung von Translate (100px, 200px) entspricht Translatex (100px) Translatey (200px).

positives Übersetzungswert bewegt das Element nach rechts (für Translatex) oder unten (für Translatey). Ein negativer Wert bewegt das Element nach links (translatex) oder up (translatey).

Schwenk ist besonders nützlich, um einen Gegenstand nach links, rechts, oben oder unten zu bewegen. Die Aktualisierung der Werte der linken, rechten, oberen und unteren Attribute erzwingt den Browser, um die Layoutinformationen des gesamten Dokuments neu zu berechnen. Die Transformation wird jedoch berechnet, nachdem das Layout berechnet wurde. Sie wirken sich auf die Position der -Anzeige des Elements auf dem Bildschirm aus, jedoch nicht auf die tatsächliche Größe. Ja, es ist seltsam, sich das Dokument -Layout und das Rendern als separate Konzepte vorzustellen, aber in Bezug auf den Browser sind sie tatsächlich getrennt. Transformationseigenschaften können in Browsern in Ihrer Nähe erscheinen

Die neueste Version der CSS -Transformationspezifikation fügt Transvers, Drehen und Skalierungsattribute

zu CSS hinzu. Transformationseigenschaften funktionieren sehr ähnlich wie ihre entsprechenden Transformationsfunktionen, aber die Werte sind eher raums getrennt als mit Kommas getrennter. Zum Beispiel können wir Transformation ausdrücken: rotate3d (1, 1, 1, 45deg): Rotate: 1 1 1 45 Grad. In ähnlicher Weise ist Translate: 15% 10% 300px sind visuell gleich wie Transformation: Translate3D (15%, 10%, 300px) und Skala: 1,5 1,5 3 ist der gleiche wie Transformation: scale3d (1,5, 1,5, 3). Mit diesen Eigenschaften können wir Rotation, Übersetzung oder Skalierung von Transformationen einzeln und nicht andere verwalten. Zum Zeitpunkt des Schreibens ist die Browserunterstützung für Transformationsimmessschaften immer noch sehr spärlich. Chrome und Samsung Internet unterstützen sie aus dem Box. In Firefox 60 und später ist die Unterstützung hinter einer Flagge versteckt;

schiefen, scrwx und scwy

Die Tilt -Transformation verändert den Winkel und den Abstand zwischen den Punkten, während sie auf derselben Ebene aufbewahrt. Neigungstransformationen werden auch

Schertransformationen

bezeichnet und verzerren die Form des Elements wie unten gezeigt, wobei die gestrichelten Linien das ursprüngliche Begrenzungsfeld des Elements darstellen.

Die Neigungsfunktionen (Verschleierung, Verschleierung und Schiefe) akzeptieren die meisten Winkeleinheiten als Parameter. Grad, Gradient und Radian sind wirksame Winkeleinheiten für die Neigungsfunktion, während die Turn -Einheit (vielleicht offensichtlich) nicht ist.

SEWWX -Funktion schneidet Elemente in x -Richtung oder horizontaler Richtung (siehe Abbildung unten). Es akzeptiert einen Parameter, der eine Winkeleinheit sein muss. Ein positiver Wert bewegt das Element nach links und ein negativer Wert bewegt das Element nach rechts.

In ähnlicher Weise schneidet schief Elemente in y -Richtung oder vertikale Richtung. Die folgende Abbildung zeigt den Effekt der Transformation: schief (30 °). Der Punkt rechts vom Ursprung wird mit zunehmendem positiven Wert nach unten bewegen. Negative Werte bewegen diese Punkte nach oben.

Dies führt zur SWEW -Funktion. Die SCEW -Funktion erfordert einen Parameter, kann jedoch bis zu zwei Parameter akzeptieren. Der erste Parameter neigt das Element in x -Richtung und der zweite Parameter neigt das Element in die y -Richtung. Wenn nur ein Parameter bereitgestellt wird, wird angenommen, dass der zweite Wert Null ist, sodass er nur in X -Richtung kippt. Mit anderen Worten, der Rendering -Effekt von SCEW (45DEG) ist der gleiche wie Skewx (45 Grad).

aktuelle Transformationsmatrix

Bisher haben wir die Transformationsfunktionen getrennt besprochen, aber sie können auch kombiniert werden. Möchten Sie Objekte skalieren und drehen? Kein Problem: Verwenden Sie die Transformationsliste. Zum Beispiel:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

Dies erzeugt die unten gezeigten Ergebnisse.

Sequenz ist wichtig, wenn die Transformationsfunktionen verwendet werden. Dies wird am besten durch Illustrationen veranschaulicht. Schauen wir uns also ein Beispiel an. Das folgende CSS neigt und dreht ein Element:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

Es gibt das Ergebnis, wie unten gezeigt.

Was passiert, wenn Sie das Element zuerst drehen und es dann neigen?

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

Die Effekte (wie unten gezeigt) sind sehr unterschiedlich.

Jede Transformation hat eine andere aktuelle Transformationsmatrix , die in der Reihenfolge seiner Transformationsfunktionen erstellt wird. Um die Gründe vollständig zu verstehen, müssen wir einige Matrix -Multiplikation lernen. Dies hilft uns auch, Matrix- und Matrix3d ​​-Funktionen zu verstehen.

Matrixmultiplikation und Matrixfunktionen

Matrix ist ein Array von Zahlen oder Ausdrücken, die in Zeilen und Spalten eines Rechtecks ​​angeordnet sind. Alle Transformationen können unter Verwendung einer 4 × 4 -Matrix dargestellt werden, wie unten gezeigt.

Diese Matrix entspricht der Matrix3D -Funktion, die 16 Parameter akzeptiert, wobei jeder Parameter einem Wert der 4 × 4 -Matrix entspricht. Zweidimensionale Transformationen können auch unter Verwendung einer 3 × 3-Matrix dargestellt werden, wie unten gezeigt.

Diese 3 × 3 -Matrix entspricht der Matrix -Transformationsfunktion. Die Funktion matrix () akzeptiert sechs Parameter, die jeweils dem Wert a bis f entsprechen.

Jede Transformationsfunktion kann unter Verwendung von Matrix- und Matrix- oder Matrix3D -Funktionen beschrieben werden. Die folgende Abbildung zeigt die 4 × 4 -Matrix der Skala3D Dimensionen. Wenn wir Transformationen kombinieren (z. B. Transformation: Skala (2) Translate (30px, 50px)), multipliziert der Browser die Matrix jeder Funktion, indem eine neue Matrix erstellt wird. Diese neue Matrix ist die auf Elemente angewendete Matrix. Aber die Matrixmultiplikation ist so: Sie ist nicht austauschbar. Für einfache Werte ist das Produkt von 3 × 2 das gleiche wie das Produkt von 2 × 3. Für eine Matrix ist das Produkt von a

×

b nicht unbedingt das gleiche wie das Produkt von

b

× a . Schauen wir uns ein Beispiel an. Wir werden das Matrixprodukt der Transformation berechnen: Skala (2) Translate (30px, 50px). Unsere Elemente wurden zweimal so skaliert, dann horizontal 60 Pixel und vertikal 100 Pixel übersetzt. Wir können auch die Matrixfunktion verwenden, um dieses Produkt darzustellen: Transformation: Matrix (2, 0, 0, 2, 60, 100). Schalten wir nun die Reihenfolge dieser Transformationen, d. H. Transformation: Translate (30px, 50px) Skala (2). Die Ergebnisse sind unten angezeigt. Beachten Sie, dass unser Objekt immer noch zweimal so skaliert ist, aber hier schwenkt es horizontal um 30 Pixel und vertikal um 50 Pixel. Unter Verwendung der Matrixfunktion ist dies Transformation: Matrix (2, 0, 0, 2, 30, 50).

Es ist auch erwähnenswert, dass die ererbte Transformationsfunktion der Transformationsliste ähnelt. Jedes Kind -Transformation wird durch jede Transformation multipliziert, die auf seinen Elternteil angewendet wird. Betrachten Sie beispielsweise den folgenden Code:

Dies ist der gleiche Rendering -Effekt wie der folgende:

In beiden Fällen ist die aktuelle Transformationsmatrix des P -Elements gleich. Obwohl wir uns bisher auf zweidimensionale Transformationen konzentriert haben, gilt dies auch für dreidimensionale Transformationen. Die dritte Dimension fügt die Illusion der Tiefe hinzu. Es bringt auch eine zusätzliche Komplexität in Form neuer Funktionen und Eigenschaften mit sich.

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

häufig gestellte Fragen zu zweidimensionalen Transformationsfunktionen in CSS

Was sind die verschiedenen Arten von zweidimensionalen Transformationsfunktionen in CSS?

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

Es gibt viele Arten von zweidimensionalen Transformationsfunktionen in CSS. Dazu gehören translate (), rotate (), scale (), skew () und matrix (). Jede Funktion ermöglicht es Ihnen, Elemente auf unterschiedliche Weise zu manipulieren. Beispielsweise bewegt die Funktion translate () ein Element aus ihrer aktuellen Position, während die Funktion rotate () das Element um einen bestimmten Punkt umdreht. Die Funktion scale () verändert die Größe eines Elements, und die Funktion Skew () verdreht das Element entlang der x-Achse und der y-Achse. Die Funktion matrix () kombiniert alle diese Transformationen zu einer.

Wie kann ich Translate () -Funktion in CSS verwenden?

Die Funktion von Translate () in CSS wird verwendet, um ein Element aus seiner aktuellen Position zu verschieben. Es hat zwei Parameter: den x-Achsenwert und der y-Achsenwert. Wenn Sie beispielsweise das Element 50 Pixel nach rechts und 20 Pixel nach unten verschieben möchten, können Sie den folgenden Code verwenden: Transform: Translate (50px, 20px);. Dadurch wird das Element an einen neuen Ort verschoben, ohne das Layout anderer Elemente auf der Seite zu beeinflussen.

Kann ich mehrere 2D -Transformationsfunktionen in CSS kombinieren?

Ja, Sie können mehrere 2D -Transformationsfunktionen in CSS kombinieren. Listen Sie dazu einfach jede Funktion in der Transformationseigenschaft auf und trennen Sie sie mit Leerzeichen. Wenn Sie beispielsweise ein Element auf die doppelte Größe skalieren und dann um 45 Grad drehen möchten, können Sie den folgenden Code verwenden: Transformation: Skalierung (2) Drehen (45 Grad);. Transformationen werden in der aufgeführten Reihenfolge angewendet.

Was ist der Zweck der Funktion matrix () in CSS?

Die Funktion matrix () in CSS ist eine sehr leistungsstarke Transformationsfunktion, mit der Sie gleichzeitig mehrere Transformationen ausführen können. Es hat sechs Parameter, die den Wert der 2 × 3 -Matrix darstellen. Diese Matrix wird verwendet, um eine Kombination aus Skalierung, Drehung, Neigung und Translationstransformationen durchzuführen. Obwohl es komplexer ist als andere Transformationsfunktionen, bietet es ein hohes Maß an Kontrolle über den Transformationsprozess.

Wie funktioniert die Funktion Skew () in CSS?

Die Skew () -Funktion in CSS wird verwendet, um Elemente entlang der X-Achse und der Y-Achse zu verdrehen. Es hat zwei Parameter: den Neigungswinkel der x-Achse und der Neientwinkel der y-Achse. Wenn Sie beispielsweise das Element 30 Grad entlang der X -Achse und 20 Grad entlang der Y -Achse neigen möchten, können Sie den folgenden Code verwenden: Transformation: SCEW (30DEG, 20DEG);. Dies wird das Element verzerrt und einen Neigungseffekt erzeugen.

Kann ich eine 2D -Transformationsfunktion für ein HTML -Element in CSS verwenden?

Ja, Sie können eine 2D -Transformationsfunktion für jedes HTML -Element in CSS verwenden. Dies umfasst Elemente auf Blockebene (wie Divs) und Inline-Elemente (wie z. B. Spannweiten). Denken Sie jedoch daran, dass die Art und Weise, wie die Transformation angewendet wird, je nach Art des Elements und ihrer Position im Layout variieren kann.

Was passiert, wenn ich keine Einheiten für die Funktion translate () in CSS angehe?

Wenn Sie keine Einheiten für die Funktion translate () in CSS angeben, werden diese Werte als Pixelwerte behandelt. Dies bedeutet, dass Transformation: Übersetzung (50, 20); Es ist jedoch normalerweise am besten, immer Einheiten anzugeben, um Klarheit und Konsistenz sicherzustellen.

Wie kann 2D -Transformationen in CSS animiert werden?

Sie können die Übergangseigenschaft verwenden, um eine 2D -Transformation in CSS zu animieren. Mit dieser Eigenschaft können Sie die Dauer, die Zeitfunktion und die Verzögerung des Übergangs angeben. Wenn Sie beispielsweise die Rotation in 2 Sekunden animieren möchten, können Sie den folgenden Code verwenden: Übergang: Transformation 2S; Dadurch wird die Rotation für die angegebene Dauer reibungslos animiert.

Was ist der Unterschied zwischen rotate () und sack () Funktionen in CSS?

Die Funktionen rotate () und skew () in CSS arbeiten auf unterschiedliche Weise auf Elementen. Die rotate () -Funktion rotiert Elemente um einen bestimmten Punkt, während die SCEW () -Funktion Elemente entlang der x- und y -Achse verdreht. Dies bedeutet, dass rotate () die Ausrichtung des Elements verändert und die Form des Elements verändert.

Kann ich 2D -Transformationsfunktionen mit anderen CSS -Eigenschaften in CSS verwenden?

Ja, Sie können 2D -Transformationsfunktionen in CSS mit anderen CSS -Eigenschaften verwenden. Sie können beispielsweise die Transformationseigenschaft in Verbindung mit der Border-Radius-Eigenschaft verwenden, um ein rotierendes Element mit abgerundeten Ecken zu erstellen. Denken Sie jedoch daran, dass die Reihenfolge, in der Eigenschaften angewendet werden, das Endergebnis beeinflusst.

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