So verwenden Sie das Transformations-Gradientenattribut in CSS3

Wir wissen, dass das Übersetzungselement dazu dient, das Element von seiner aktuellen Position zu verschieben und die Verschiebung gemäß den von uns angegebenen Koordinaten durchzuführen. Lassen Sie uns die Übersetzung im Detail erklären und einen kleinen Fall erstellen, um allen das Verständnis zu erleichtern.

translate() verschiebt das Element von seiner aktuellen Position, basierend auf der angegebenen linken (X-Koordinate) und oberen (Y-Koordinate)

translate(x,y) definiert die 2D-Transformation von xy nach eine Zahl x Positiv ist rechts, negativ ist links, y ist positiv, unten, negativ ist oben

translate3d(x,y,z) definiert die 3D-Konvertierungsmethode

scale(). Die Größe des Elements wird je nach gegebener Breite (X-Achse) und Höhe (Y-Achse) vergrößert oder verkleinert.

scale(x,y) definiert die 2D-Transformation x y als Vielfaches

scale(2,4) wandelt die Breite in die ursprüngliche 2-fache Größe um, wandelt die Höhe in das 4-fache der ursprünglichen Höhe um

Die Methode „rotate()“ dreht das Element im Uhrzeigersinn um den angegebenen Winkel. Negative Werte sind zulässig, das Element wird gegen den Uhrzeigersinn gedreht

rotate(30deg) bedeutet Drehung um 30 Grad

matrix()-Methode

skew(x-angle,y -Winkel) Definition 2D-Neigungstransformation entlang der X- und Y-Achse.

Übergangsübergangpropertytransition-property-Attribut gibt den Namen der CSS-Eigenschaft an, die den Übergangseffekt anwendet, zum Beispiel: width

transition -property: none|all|property;

Die Eigenschaft „transition-duration“ gibt die Zeit (in Sekunden oder Millisekunden) an, die benötigt wird, um den Übergangseffekt abzuschließen.

Das Attribut „transition-timing-function“ gibt die Geschwindigkeitskurve des Übergangseffekts an.

Übergangszeitfunktion: linear|ease|ease-in|ease-out|ease-in-out|cubic-

Bezier(n,n,n,n); : Gibt an, langsam zu beginnen und dann schneller zu werden

Das Attribut „transition-delay“ gibt an, wann der Übergangseffekt beginnt.

Beispiel:

div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}

Ich glaube, dass Sie die Methode 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

So verwenden Sie die CSS3-Funktion rotation()

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