So verwenden Sie das Transformationsattribut in CSS3

Jeder kennt das transform-Attribut von CSS3, weil wir es oft verwenden, deshalb werde ich Ihnen heute eine gute Analyse geben, wie man diese Transformation verwendet und was das ist transformieren? Verwendung und Grammatik.

Syntax: none|[]* Der Anfangswert ist none.

transform-functionFunktionWert:

matrix(): Matrixtransformation definieren.

translate(): Element Objekt verschieben.

scale(): Elementobjekt skalieren.

rotate(): Elementobjekt drehen.

skew(): Skew-Elementobjekt.

Zum Beispiel (kompatible Browser):

1.rotate() Funktion: transform: rotieren(-90deg);-o-transform: rotieren(-90deg);-moz-transform: rotieren(-90 Grad);-webkit-transform: rotieren(-90 Grad);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.scale() Funktion: transform: scale(2 );-o-transform: Scale(2);-moz-transform: Scale(2);-webkit-transform: Scale(2);

Bei der Übergabe verschiedener Parameterwerte für Scale, ScaleAnimationDie Effekte sind unterschiedlich. Skala (1,2) bedeutet, dass die Breite unverändert bleibt und die Höhe doppelt so hoch wird wie das Original. Scale(1,-2) bedeutet, dass die Breite unverändert bleibt, die Höhe verdoppelt und um 180 Grad gedreht wird.

3.translate() Funktion: transform: Translate(4px, 6px);-o-transform: Translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform : Translate(4px, 6px); Der Parameter kann ein negativer Pixelwert sein.

4.skew() Funktion: transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);- webkit-transform: skew(30deg, -20deg); ändert die Form des Elements, aber die Drehfunktion ändert die Form des Elements nicht.

5.matrix() Funktion: transform: Matrix(3,2,3,5,0,0);-o-transform: Matrix(3,2,3,5,0,0); -moz-transform: Matrix(3,2,3,5,0,0);-webkit-transform: Matrix(3,2,3,5,0,0); Die Parameter sind 6 Werte.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Einführung von CSS3 zum Übersetzungsattribut

Detaillierte Einführung von CSS3 zum Hintergrundgrößenattribut

Tutorial zur Verwendung des Transformationsattributs in CSS3

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