translate bedeutet „verschieben“ und ist eine in CSS integrierte Funktion. In Verbindung mit dem Transformationsattribut kann sie Elemente entlang der horizontalen Richtung (X-Achse) und vertikalen Richtung (Y-Achse) verschieben. Die Verwendung von Translate ist in drei Situationen unterteilt: 1. „translateX(x)“, das Element bewegt sich nur in horizontaler Richtung; 2. „translateY(y)“, das Element bewegt sich nur in vertikaler Richtung; (x,y)“ bewegt sich das Element sowohl horizontal als auch vertikal.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
übersetzen bedeutet: Bewegung, Übersetzung, Verschiebung.
CSS-Transformation: Translate
In CSS wird die Translate()-Methode mit dem Transformationsattribut verwendet, um Elemente entlang der horizontalen Richtung (X-Achse) und vertikalen Richtung (Y-Achse) zu verschieben.
Für die Verschiebungstranslate()-Methode unterteilen wir sie in drei Situationen:
translateX(x): Das Element bewegt sich nur in horizontaler Richtung (X-Achsen-Bewegung);
translateY(y): das Element bewegt sich nur in vertikaler Richtung. Richtungsbewegung (Y-Achsen-Bewegung);
transklate(x,y): Das Element bewegt sich gleichzeitig in horizontaler und vertikaler Richtung (X-Achse und Y-Achse bewegen sich gleichzeitig)
wobei:
x das Element darstellt. Die Bewegungsstrecke in horizontaler Richtung (X-Achse). Wenn x positiv ist, bedeutet dies, dass sich das Element in horizontaler Richtung (positive X-Achsenrichtung) nach rechts bewegt ); wenn x negativ ist, bedeutet dies, dass sich das Element in horizontaler Richtung (negative X-Achsenrichtung) bewegt.
y stellt die Bewegungsstrecke des Elements in horizontaler Richtung (y-Achse) dar. Wenn y positiv ist, bedeutet dies, dass sich das Element in vertikaler Richtung nach unten bewegt; in vertikaler Richtung nach oben.
In den W3C-Vorschriften ist die positive Richtung der x-Achse im ausgewählten Koordinatensystem aufgrund der menschlichen Angewohnheit, von oben nach unten zu lesen, nach rechts, während die positive Richtung der y-Achse nach unten zeigt.
In CSS3 gehören alle Transformationsmethoden zum Transformationsattribut, daher muss allen Transformationsmethoden „transform:“ vorangestellt werden, um die „Transformation“-Verarbeitung anzuzeigen. Jeder muss sich daran erinnern.
Die Einheit ist px, em oder Prozentsatz usw. Wenn x und y Prozentsätze sind, entsprechen sie der Breite + Innenabstand und der Höhe + Innenabstand des verschobenen Elements.
1. Translate(x, y): 2D-Mobiltransformation definieren
x ist der erste Übergangswertparameter, y ist die zweite Übergangswertparameteroption. Wenn nicht angegeben, hat ty den Wert 0. Das heißt, translator(x,y), was bedeutet, dass das Objekt entsprechend dem eingestellten x-, y-Parameterwert verschoben wird. Wenn der Wert eine negative Zahl ist, wird das Objekt standardmäßig in die entgegengesetzte Richtung verschoben Der Mittelpunkt des Elements kann auch auf Basis des Transformationsursprungs erfolgen.
Zum Beispiel:
transform:translate(50px,50px):
2. Translate(x): Geben Sie eine Bewegung in der Richtung der Y-Achse an
Zum Beispiel:
transform:translateX(50px):
Beispiel: Das Element ist auf der Webseite zentriert
transform:translateY(50px):
(Lernvideo-Sharing: Web-Frontend )
Das obige ist der detaillierte Inhalt vonWas bedeutet Übersetzen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
