Explication détaillée CSS3 : transformer

Qu'est-ce que la transformation CSS3 ?

transformer signifie : changer, déformer...; transformer

Quelles sont les propriétés communes de la transformation CSS3 ?

Les attributs de transform incluent : rotate() / skew() / scale() / translation(,), qui sont divisés respectivement en x et y, tels que : rotatex() et rotatey(), et bientôt. .

Décomposons l'utilisation de chaque attribut :

transform:rotate() :

Signification : rotation où "deg" signifie "degré", tel que " 10deg ; " signifie " 10 degrés ", pareil ci-dessous.

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

transform:skew( ):

Signification : biais;

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

transform :scale() :

Signification : Proportion ; "1,5" signifie un agrandissement à un rapport de 1,5. Si vous souhaitez agrandir 2 fois, vous devez écrire "2,0", et si vous souhaitez effectuer un zoom arrière, c'est un "-" négatif.

.demo_transform3{-webkit-transform:scale

transform:translate() :

Sens : changement, déplacement ;Ce qui suit signifie un déplacement de 120 pixels vers la droite. S'il est déplacé vers le haut, remplacez simplement le "0" suivant par une valeur différente. S'il est déplacé vers la gauche et vers le bas, ce sera un "-" négatif.

.demo_transform4{-webkit-transform:translate

synthèse de transformation :

Ce sont les attributs communs de la transformation. Ci-dessous, nous utilisons l'aide de la transition pour démontrer un exemple complet de transformation CSS3 :

.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); c'est-à-dire le code d'identification du noyau

-moz-transform:rotate(7deg);             //-moz représente le code d'identification du noyau Firefox  

-webkit-transform:rotate(7deg);                  code d'identification

-o-transform:rotate(7deg); Déclaration d'identification unifiée. . . Il est préférable d'écrire cette phrase, qui est conforme aux standards du w3c

Pour des explications plus détaillées sur CSS3 : transformer Pour les articles connexes, veuillez faire attention au site PHP chinois !