So verwenden Sie Transformation in CSS

Die Transformationseigenschaft in CSS wird verwendet, um geometrische Transformationen an Elementen durchzuführen, einschließlich Verschiebung, Skalierung, Drehung und Neigung. Seine Verwendung umfasst: Übersetzung: translatorX(x)/translateY(y)/translate(x, y) Skalierung: scaleX(x)/scaleY(y)/scale(x, y) Rotation: rotieren(Winkel)/rotateX(Winkel )/rotateY(angle)/rotateZ(angle) skew: skewX(angle)/skewY(angle)

Verwendung der Transformation in CSS

Das Transformationsattribut wird verwendet, um geometrische Transformationen an Elementen in CSS durchzuführen , einschließlich Translation, Zoom, Rotation und Neigung. Es bietet leistungsstarke Funktionen zum Erstellen verschiedener visueller Effekte wie Animation, Morphing und Verzerrung.

Verwendung

Die Syntax des Transformationsattributs lautet wie folgt:

<code class="css">transform: <transform-function> [<transform-function>]...;</code>

Unter diesen kann <transform-function> eine der folgenden Transformationsfunktionen sein: <transform-function> 可以是以下任何变换函数：

• translateX(x)：平移元素沿 x 轴
• translateY(y)：平移元素沿 y 轴
• translate(x, y)：平移元素沿 x 和 y 轴
• scaleX(x)：缩放元素沿 x 轴
• scaleY(y)：缩放元素沿 y 轴
• scale(x, y)：缩放元素沿 x 和 y 轴
• rotate(angle)：旋转元素一个角度
• rotateX(angle)：沿 x 轴旋转元素
• rotateY(angle)：沿 y 轴旋转元素
• rotateZ(angle)：沿 z 轴旋转元素
• skewX(angle)：倾斜元素沿 x 轴
• skewY(angle)

translateX(x) code>: Verschieben Sie das Element entlang der x-Achse<p><strong><code>translateY(y): Verschieben Sie das Element entlang der y-Achse

translate(x, y): Verschieben Sie das Element entlang der x- und y-Achse <p></p> <code>scaleX(x): Skalieren Sie das Element entlang der x-Achse

scaleY(y): Skalieren das Element entlang der y-Achse

scale(x, y): Skaliert das Element entlang der x- und y-Achse<p></p> <code>rotate(angle): Drehen Sie das Element um ein Winkel

rotateX(angle): Drehen Sie das Element entlang der x-Achse

rotateY(angle): Drehen Sie das Element entlang der y-Achse

rotateZ(angle): Element entlang der Z-Achse drehen

• skewX(angle): Elemente entlang der x-Achse neigen
• skewY(angle) Code>: Elemente entlang der Y-Achse verzerren
• Mehrere Transformationen

Das Transformationsattribut kann mehrere durch Leerzeichen getrennte Transformationsfunktionen kombinieren:

<code class="css">transform: translate(50px, 100px) rotate(45deg) scale(2);</code>

Kombinierte Einheiten

• Transformationswerte können Pixel (px) enthalten ), Prozentsätze (%) oder andere CSS-Einheiten.

Auf Elemente angewendet 🎜🎜🎜Das Transformationsattribut kann auf jedes HTML-Element angewendet werden, wird jedoch häufig zum Erstellen von Animationen und visuellen Effekten verwendet, wie zum Beispiel: 🎜🎜🎜Menüelemente drehen 🎜🎜Schaltflächen skalieren, um Interaktion anzuzeigen 🎜🎜Verschieben Elemente als Reaktion auf die Benutzereingabe 🎜🎜Transformieren Sie Bilder, um einzigartige Effekte zu erzeugen🎜🎜🎜🎜Beachten Sie, dass sich die 🎜🎜🎜🎜transform-Eigenschaft auf das Layoutfeld eines Elements auswirkt, nicht auf dessen Inhaltsfeld. 🎜🎜Das Transformationsattribut wird in modernen Browsern weitgehend unterstützt, erfordert in älteren Browsern jedoch möglicherweise ein Herstellerpräfix. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Transformation in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!