Comment utiliser l'attribut transform en CSS3

Tout le monde connaît l'attribut transform de CSS3, car nous l'utilisons souvent, donc aujourd'hui je vais vous donner une bonne analyse de la façon d'utiliser cette transformation, quelle est la transformer ? Usage et grammaire.

Syntaxe : none|[]* La valeur initiale est none.

transform-functionFonctionValeur :

matrix() : Définir la transformation matricielle.

translate() : Déplace l'élément objet .

scale() : objet d'élément d'échelle.

rotate() : faire pivoter l'objet élément.

skew() : objet élément d'inclinaison.

Par exemple (navigateurs compatibles) :

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

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

Lors du passage de différentes valeurs de paramètres pour l'échelle, échelleAnimationLes effets sont différents. scale(1,2) signifie que la largeur reste inchangée et que la hauteur devient le double de l'originale. scale(1,-2) signifie que la largeur reste inchangée, la hauteur est doublée et pivotée de 180 degrés.

Fonction 3.translate() : transform : translate(4px, 6px);-o-transform : translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform : translation(4px, 6px); Le paramètre peut être une valeur de pixel négative.

Fonction 4.skew() : transformer : skew(30deg, -20deg);-o-transform : skew(30deg, -20deg);-moz-transform : skew(30deg, -20deg);- webkit-transform: skew(30deg, -20deg); changera la forme de l'élément, mais la fonction de rotation ne changera pas la forme de l'élément.

Fonction 5.matrix() : transform : matrice(3,2,3,5,0,0);-o-transform : matrice(3,2,3,5,0,0); -moz-transform: matrice(3,2,3,5,0,0);-webkit-transform: matrice(3,2,3,5,0,0); Les paramètres sont 6 valeurs.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Introduction détaillée de CSS3 à l'attribut translation

Introduction détaillée de CSS3 à l'attribut background-size

Tutoriel sur l'utilisation de l'attribut transform en Css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!