Detaillierte CSS3-Erklärung: transformieren

Was ist eine CSS3-Transformation?

transformieren bedeutet: ändern, verformen...; transformieren

Was sind die gemeinsamen Eigenschaften der CSS3-Transformation?

Zu den Attributen der Transformation gehören: rotieren () / skew () / skalieren () / übersetzen (,), die jeweils in x und y unterteilt sind, z. B. rotierenx () und rotieren () und bald. .

Lassen Sie uns die Verwendung jedes Attributs aufschlüsseln:

transform:rotate():

Bedeutung: Drehung; wobei „Grad“ „Grad“ bedeutet, z. B. „10 Grad“. „bedeutet „10 Grad“, das Gleiche gilt auch unten.

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)

transform:skew( ):

Bedeutung: schief;

.demo_transform2{-webkit-transform:skew(20deg);

transform :scale():

Bedeutung: Proportion; „1,5“ bedeutet Vergrößerung im Verhältnis 1,5. Wenn Sie um das Zweifache vergrößern möchten, müssen Sie „2,0“ eingeben, und wenn Sie verkleinern möchten, es ist negativ „-“.

.demo_transform3{-webkit-transform:scale

transform:translate():

Bedeutung: Veränderung, Verschiebung ;Das Folgende bedeutet eine Verschiebung um 120 Pixel nach rechts, ändern Sie einfach die folgende „0“ in einen anderen Wert. Wenn sie nach links und unten verschoben wird, ist es ein negatives „-“.

.demo_transform4{-webkit-transform:translate

Transformationssynthese:

Dies sind die gemeinsamen Attribute von Transformation. Im Folgenden verwenden wir die Hilfe von Transition, um ein umfassendes Beispiel einer CSS3-Transformation zu demonstrieren:

.demo_transform5{-webkit-transition:all 1s easy-in-out;-moz-transition:all 1s easy-in-out }
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew

-ms-transform:rotate(7deg); ms repräsentiert das dh Kernel-Identifikationscode

-moz-transform:rotate(7deg);             //-moz repräsentiert den Firefox-Kernel-Identifikationscode  

-webkit-transform:rotate(7deg);                   Webkit repräsentiert den Kernel von Google Identifikationscode

-o-transform:rotate(7deg); Einheitliche Identifikationserklärung. . . Schreiben Sie am besten diesen Satz auf, der den W3C-Standards entspricht

Für detailliertere Erläuterungen zu CSS3: transform Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!