CSS implementiert fünf gängige 2D-Transformationen

CSS implementiert fünf gängige 2D-Transformationen

2D-Transformationen in CSS ermöglichen es uns, einige grundlegende Transformationsvorgänge im zweidimensionalen Raum durchzuführen, wie z. B. Verschieben, Drehen, Skalieren oder Verzerren. Die transformierten Elemente ähneln absolut positionierten Elementen und wirken sich nicht auf umgebende Elemente aus, können sich jedoch mit umgebenden Elementen überlappen. Der Unterschied besteht darin, dass die transformierten Elemente noch immer den Platz vor der Transformation auf der Seite einnehmen.

2D-Transformationen können mit der Transform-Eigenschaft in CSS und den folgenden Transformationsfunktionen erreicht werden:

  1. matrix(): Gibt eine 2D-Transformation in Form einer Transformationsmatrix mit sechs Werten (a, b, c, d, e, f) an, was dem direkten Anwenden einer Transformationsmatrix von [a, b, c, d, e, f] entspricht.
  2. translate(): verschiebt das Objekt entlang der X- und Y-Achse. Diese Funktion erfordert 1 bis 2 Parameter. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, ist der Standardwert 0.
  3. translatex(): verschiebt das Objekt entlang der X-Achse (horizontal);
  4. translatey(): verschiebt das Objekt entlang der Y-Achse (vertikale Richtung);
  5. rotate(): Dreht das angegebene Objekt. Der Drehwinkel kann in den Funktionsparametern angegeben werden;
  6. scale(): Skaliert das Objekt. Diese Funktion erfordert 1 bis 2 Parameter. Der erste Parameter entspricht der X-Achse und der zweite Parameter entspricht der Y-Achse. Wenn der zweite Parameter nicht angegeben wird, wird standardmäßig der Wert des ersten Parameters verwendet.
  7. scalex(): skaliert das Objekt (ändert die Breite des Elements);
  8. scaley(): skaliert das Objekt (ändert die Höhe des Elements);
  9. skew(): Neigt und verzerrt das Objekt entlang der X- und Y-Achse. Diese Funktion erfordert 1 bis 2 Parameter. Der erste Parameter entspricht der X-Achse und der zweite Parameter der Y-Achse. Wenn das zweite Argument nicht angegeben wird, ist der Standardwert 0;
  10. skewx(): verzerrt das Objekt entlang der X-Achse (horizontal);
  11. skewy(): Verzerrt das Objekt entlang der Y-Achse (vertikale Richtung).

1. übersetzen()

Mit der Funktion translate() können Sie ein Element gemäß den angegebenen Parametern horizontal (X-Achse) oder vertikal (Y-Achse) verschieben. Die Syntax der Funktion lautet wie folgt:

übersetzen(tx, ty)

Dabei entspricht tx der Distanz, die das Element in horizontaler Richtung (X-Achse) zurücklegt, und ty der Distanz, die das Element in vertikaler Richtung (Y-Achse) zurücklegt. Der Parameter ty kann ignoriert werden (Standard ist 0) und beide Parameter können negativ sein.

[Beispiel] Verwenden Sie die Funktion translate(), um das angegebene Element zu verschieben:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: #CCC;
            transformieren: übersetzen(100px, 10px);
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Abbildung: Demonstration der Funktion „translate()“

Wenn Sie das Element nur horizontal oder vertikal verschieben möchten, können Sie auch translateX() (zum horizontalen Verschieben des Elements) oder translateY() (zum vertikalen Verschieben des Elements) verwenden. Sowohl die Funktionen translateX() als auch translateY() müssen nur einen Parameter angeben, zum Beispiel:

translateX(100px); /* Entspricht translate(100px, 0px); */
translateY(10px); /* Entspricht translate(0px, 10px); */

2. drehen()

Die Funktion rotate() wird verwendet, um ein Element um einen bestimmten Winkel zu drehen. Die Syntax der Funktion lautet wie folgt:

drehen(a)

Der Parameter a gibt den Winkel an, um den das Element gedreht werden soll. Ist a ein positiver Wert, bedeutet dies eine Drehung im Uhrzeigersinn, ist a ein negativer Wert, bedeutet dies eine Drehung gegen den Uhrzeigersinn.

[Beispiel] Verwenden Sie die Funktion rotate(), um ein Element zu drehen:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: #CCC;
            Rand: 20px 0px 0px 20px;
            transformieren: drehen (45 Grad);
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Abbildung: Demonstration der Funktion „rotate()“

3. Skala ()

Mit der Funktion scale() können Sie das angegebene Element skalieren (vergrößern oder verkleinern). Die Syntax der Funktion lautet wie folgt:

Skala (sx, sy)

Dabei stellt sx das horizontale Skalierungsverhältnis und sy das vertikale Skalierungsverhältnis dar. Darüber hinaus kann der Parameter sy weggelassen werden und sein Standardwert ist gleich sx.

[Beispiel] Verwenden Sie die Funktion scale(), um das angegebene Element zu skalieren:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: #CCC;
            transformieren: Skalierung (0,7);
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Abbildung: Demonstration der Funktion scale()

Tipp: Wenn der angegebene Parameterwert in scale() außerhalb des Bereichs von -1 bis 1 liegt, wird das Element vergrößert; wenn der Parameterwert innerhalb des Bereichs von -1 bis 1 liegt, wird das Element verkleinert.

Wenn Sie die Elementgröße nur in horizontaler oder nur in vertikaler Richtung skalieren möchten, können Sie ähnlich wie bei der Funktion translate() auch die Funktionen scaleX() (Element horizontal skalieren) und scaleY() (Element vertikal skalieren) verwenden. Die Funktionen scaleX() und scaleY() erfordern nur ein Argument, zum Beispiel:

scaleX(0.5); /* Entspricht scale(0.5, 1); */
scaleY(0.5); /* Entspricht scale(1, 0.5); */

4. schief()

Mit der Funktion skew() können Sie das Element horizontal (X-Achse) und vertikal (Y-Achse) neigen und verzerren. Die Syntax der Funktion lautet wie folgt:

schief (ax, ay)

Der Parameter ax stellt den horizontalen Verzerrungswinkel des Elements dar und der Parameter ay stellt den vertikalen Verzerrungswinkel des Elements dar. Darüber hinaus kann der Parameter ay weggelassen werden. Wenn der Parameter ay weggelassen wird, ist sein Standardwert 0.

[Beispiel] Verwenden Sie die Funktion skew(), um das angegebene Element zu verzerren:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: #CCC;
            Rand: 20px 0px 0px 10px;
            Transformieren: Schrägstellung (-15 Grad, 20 Grad);
        }
    </Stil>
</Kopf>
<Text>
    <div></div>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Abbildung: Demonstration der Funktion skew()

Wenn Sie das Element außerdem nur in horizontaler oder nur in vertikaler Richtung verzerren möchten, können Sie dazu auch die Funktionen skewX() (Element horizontal skalieren) und skewY() (Element vertikal skalieren) verwenden. Die Funktionen skewX() und skewY() erfordern nur ein Argument, zum Beispiel:

skewX(15deg); /* entspricht skew(15deg, 0deg); */
skewY(15deg); /* Entspricht skew(0deg, 15deg); */

5. Matrix ()

Die Funktion matrix() kann als Abkürzung der Funktionen skew(), scale(), rotate() und translate() angesehen werden. Alle 2D-Transformationsoperationen können gleichzeitig über die Funktion matrix() definiert werden. Das Funktionssyntaxformat lautet wie folgt:

Matrix (a, b, c, d, tx, ty)

Die sechs Parameter in der Funktion matrix() entsprechen den Funktionen scaleX(), skewY(), skewX(), scaleY(), translateX() und translateY(). Sie können matrix() verwenden, um verschiedene 2D-Transformationsoperationen zu implementieren, zum Beispiel:

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);: wobei tx und ty die horizontalen und vertikalen Translationswerte sind;
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);: wobei a der Gradwert ist. Sie können die sin(a)- und -sin(a)-Werte vertauschen, um die umgekehrte Rotation durchzuführen;
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0);: wobei sx und sy die horizontalen und vertikalen Skalierungswerte sind;
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0);: wobei ax und ay die horizontalen und vertikalen Werte in Grad sind.

[Beispiel] Verwenden Sie die Funktion matrix(), um 2D-Transformationsoperationen an Elementen durchzuführen:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: #CCC;
            Rand: 20px 0px 0px 10px;
            schweben: links;
        }
        .eins {
            Transformation: Matrix (0,866, 0,5, -0,5, 0,866, 0, 0);
        }
        .zwei {
            Rand links: 35px;
            Transformation: Matrix (0,586, 0,8, -0,8, 0,686, 0, 0);
        }
        .drei {
            Rand links: 40px;
            Rand oben: 25px;
            Transformation: Matrix (0,586, 0,8, -0,8, 0,866, 0, 0);
        }
        .vier {
            Transformation: Matrix (0,586, 0,8, -0,8, 0,586, 40, 30);
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="eins"></div>
    <div Klasse="zwei"></div>
    <div Klasse="drei"></div>
    <div Klasse="vier"></div>
</body>
</html>

Die Laufergebnisse sind in der folgenden Abbildung dargestellt:

Abbildung: Demonstration der Funktion matrix()  

Damit ist dieser Artikel über fünf häufige 2D-Transformationen, die in CSS implementiert sind, abgeschlossen. Weitere Informationen zu CSS-2D-Transformationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK

>>:  Einige Zusammenfassungen von Fällen zur Konvertierung von HTML in PDF (mehrere Bilder empfohlen)

Artikel empfehlen

Eine kurze Diskussion über die Magie von parseInt() in JavaScript

Ursache Der Grund für das Schreiben dieses Blogs ...

CSS-Ansichtsfenstereinheiten für schnelles Layout

CSS-Viewport-Einheiten gibt es schon seit einigen...

Mysql kann keine nicht aggregierten Spalten auswählen

1. Einleitung Ich habe mein Blog kürzlich aktuali...

Ein einfaches Beispiel für die Verwendung von Vue3-Routing VueRouter4

Routenplanung vue-router4 behält den Großteil der...

FTP-Remoteverbindung zu Linux über SSH

Installieren Sie zunächst SSH in Linux. Nehmen Si...

Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung

Inhaltsverzeichnis Vorwort 1. Lazy Loading-Routin...

Vue-Router erlaubt keine Navigation zum aktuellen Standort (/Pfad) Fehlerursachen und -behebungen

Inhaltsverzeichnis Fehlermeldung Ursache Fehlerde...

js implementiert einen einfachen Rechner

Verwenden Sie natives JS, um einen einfachen Rech...

So starten und starten Sie nginx unter Linux neu

Nginx (Engine x) ist ein leistungsstarker HTTP- u...

Detaillierte Erklärung des TodoList-Falls von Vue

<Vorlage> <div id="Wurzel">...

CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung

So verwenden Sie CSS, um die Bogenbewegung von El...

So erhalten Sie ein dauerhaftes kostenloses SSL-Zertifikat von Let’s Encrypt in Docker

1. Ursache Der offizielle Cerbot ist zu nervig. E...

Detailliertes Tutorial zur Installation von Docker auf CentOS 8

1. Frühere Versionen yum entfernen Docker Docker-...

So installieren Sie Nginx und konfigurieren mehrere Domänennamen

Nginx-Installation CentOS 6.x yum verfügt standar...

mysql8.0.23 Linux (Centos7) Installation vollständiges und ausführliches Tutorial

Inhaltsverzeichnis Was ist eine relationale Daten...