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
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
3. Drehung:
transform:rotate (Parameter); (Einheit der Drehung: Grad)
Standardmäßig: Drehung um den Mittelpunkt
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
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!