Was sind die 2D-Verformungen in CSS3?

Die 2D-Verformungen in CSS3 umfassen: 1. Verschiebungstransformation:translate(); 3. Rotationstransformation:rotate(); 4. Skew transform:skew().

Umgebung:

Dieser Artikel gilt für alle Computermarken.

(Teilen von Lernvideos: css-Video-Tutorial)

2d-Transformation ist unterteilt in:

1. Verschiebung:

transform:translate (Parameter 1, Parameter 2)

Parameter 1: auf dem X verschobene Strecke Achse

Parameter 2: Die auf der Y-Achse zurückgelegte Strecke

Parametereinstellungen:

Wenn es ein positiver Wert ist: Die X-Achse geht nach rechts und die Y-Achse geht nach unten, wenn es ein negativer Wert ist : die X-Achse geht nach links und die Y-Achse nach oben

Beispiel:

Wir können die Verschiebung der X-Achse/Y-Achse auch separat einstellen:

transform:translateX(parameter); zur X-Achsenrichtung

transform:translateY(parameter); Entsprechend der Y-Achsen-Richtungsverschiebung

2. Skalierungsverhältnis der Achse

Parameter 2: Skalierungsverhältnis der Y-Achse

(zwischen 0 und 0,999999 bedeutet Verkleinern, größer als 1 bedeutet Vergrößern, gleich 1 bedeutet, dass die 1-fache Größe unverändert bleibt)

Hinweis: Wenn die beiden Die Parameter sind gleich, Sie können nur einen Parameter schreiben.

Wir können die Skalierung der X-Achse/Y-Achse auch separat einstellen

transform:scaleX(parameter); Skalierung entsprechend der Achsenrichtung

Beispiel:

3. Drehung:

transform:rotate (Parameter); (Einheit der Drehung: Grad)

Standardmäßig: Drehung um den Mittelpunkt

Wenn der Parameter a ist positive Zahl, die Drehrichtung ist im Uhrzeigersinn, Parameter Wenn es ein negativer Wert ist, ist die Drehrichtung gegen den Uhrzeigersinn

Natürlich können wir die Drehung um eine bestimmte Achse auch separat einstellen

transform:rotateX (Parameter) Um das X drehen Achse

transform:rotateY (Parameter) Drehen um die Y-Achse

Beispiel:

4. Neigung:

transform:skew (Parameter 1, Parameter 2); (Neigungswinkeleinheit: Grad)

If es ist ein positiver Wert: X-Achse nach rechts, Y-Achse nach unten

Bei negativen Werten: Tilt

transform:skewX (parameter)　Neigung in Richtung der

Das obige ist der detaillierte Inhalt vonWas sind die 2D-Verformungen in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!