Eine detaillierte Einführung in das Übersetzungsattribut von CSS3

Das

translate-Attribut ist ein Verschiebungsattribut. Wir können ein Element von seiner aktuellen Position an eine bestimmte Position verschieben, indem ich es unten im Detail vorstelle.

Durch die Methode translator() wird das Element von seiner aktuellen Position entsprechend der angegebenen Position links (X-Koordinate) und oben (Y-Koordinate) verschoben Parameter:

Der Wert translator(50px,100px) verschiebt das Element 50 Pixel von links und 100 Pixel von oben.

Rotate()-Methode

Durch die Rotate()-Methode wird das Element im Uhrzeigersinn um einen bestimmten Winkel gedreht. Negative Werte sind zulässig und das Element wird gegen den Uhrzeigersinn gedreht.

Der Wert „rotate(30deg)“ dreht das Element um 30 Grad im Uhrzeigersinn.

scale()-Methode

Mit der scale()-Methode vergrößert oder verkleinert sich die Größe des Elements entsprechend den angegebenen Parametern für Breite (X-Achse) und Höhe (Y-Achse):

Der Wert Scale(2,4) wandelt die Breite in das 2-fache der Originalgröße und die Höhe in das 4-fache der Originalhöhe um.

skew()-Methode

Durch die skew()-Methode wird das Element um den angegebenen Winkel entsprechend den angegebenen Parametern für die horizontale Linie (X-Achse) und die vertikale Linie (Y-Achse) gespiegelt :

Der Wert skew(30deg,20deg) dreht das Element um 30 Grad um die X-Achse und 20 Grad um die Y-Achse.

matrix()-Methode

matrix()-Methode kombiniert alle 2D-Transformationsmethoden miteinander. Die Methode

matrix() benötigt sechs Parameter und enthält mathematische Funktionen, mit denen Sie Elemente drehen, skalieren, verschieben und neigen können.

Neue Transformationseigenschaften

Die folgende Tabelle listet alle Transformationseigenschaften auf:

transformation wendet eine 2D- oder 3D-Transformation auf ein Element an.

transform-origin ermöglicht es Ihnen, die Position des transformierten Elements zu ändern.

2D-Transformationsmethode

matrix(n,n,n,n,n,n) definiert die 2D-Transformation unter Verwendung einer Matrix aus sechs Werten.

translate(x,y) definiert eine 2D-Transformation, die Elemente entlang der X- und Y-Achse verschiebt.

translateX(n) definiert eine 2D-Transformation, die Elemente entlang der X-Achse verschiebt.

translateY(n) definiert eine 2D-Transformation, die Elemente entlang der Y-Achse verschiebt.

scale(x,y) definiert die 2D-Skalierungstransformation und ändert die Breite und Höhe des Elements.

scaleX(n) definiert die 2D-Skalierungstransformation und ändert die Breite des Elements.

scaleY(n) definiert die 2D-Skalierungstransformation und ändert die Höhe des Elements.

rotate(angle) definiert die 2D-Rotation und gibt den Winkel in den Parametern an.

skew(x-angle,y-angle) definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse.

skewX(angle) definiert eine 2D-Skew-Transformation entlang der X-Achse.

skewY(angle) definiert eine 2D-Skew-Transformation entlang der Y-Achse.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zur Verwendung des Transformationsattributs in CSS3

Detaillierte Einführung in das Border-Image-Attribut in Css3

Schritte zum Erzielen eines Flammeneffekts mit der Css3-Schriftart

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Übersetzungsattribut von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!