Maison >interface Web >tutoriel CSS >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!