Comment utiliser l'attribut de dégradé de transformation en CSS3

Nous savons que l'élément de traduction consiste à déplacer l'élément de sa position actuelle et à effectuer le déplacement en fonction des coordonnées que nous avons données. Expliquons la traduction en détail et faisons un petit cas pour aider tout le monde à comprendre.

translate() déplace l'élément de sa position actuelle, en fonction de la gauche (coordonnée x) et du haut (coordonnée y)

translate(x,y) définit la transformation 2D xy en un nombre x Le positif est à droite, le négatif est à gauche, y est positif, vers le bas, le négatif est vers le haut

translate3d(x,y,z) définit la méthode de conversion 3D

scale(). La taille de l'élément augmentera ou diminuera en fonction des paramètres de largeur (axe X) et de hauteur (axe Y)

scale(x,y) définit la transformation 2D x y comme un multiple

scale(2,4) convertit la largeur en 2 fois la taille d'origine, convertit la hauteur en 4 fois la hauteur d'origine

La méthode rotate() fait pivoter l'élément dans le sens des aiguilles d'une montre de l'angle donné. Les valeurs négatives sont autorisées, l'élément sera tourné dans le sens inverse des aiguilles d'une montre

rotate(30deg) signifie une rotation de 30 degrés

méthode matrix()

skew(x-angle,y -angle) définition Transformation d'inclinaison 2D, le long des axes X et Y.

transition transitionpropertyl'attribut transition-property spécifie le nom de la propriété CSS qui applique l'effet de transition, par exemple : width

transition -property: none|all|property;

La propriété transition-duration spécifie le temps (en secondes ou millisecondes) nécessaire pour terminer l'effet de transition.

L'attribut transition-timing-function spécifie la courbe de vitesse de l'effet de transition.

fonction de synchronisation de transition : linéaire | facilité | facilité d'entrée | facilité d'entrée | facilité d'entrée | cubique-

bézier (n, n, n, n); : Spécifie de démarrer lentement puis de devenir plus rapide

L'attribut transition-delay spécifie quand l'effet de transition commence.

Exemple :

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;
}

Je pense que vous maîtrisez la méthode 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

Comment utiliser la fonction CSS3 rotate()

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!