Une introduction détaillée à l'attribut translation de CSS3

L'attribut

translate est un attribut de déplacement. Nous pouvons déplacer un élément de sa position actuelle vers une position spécifiée via la méthode translation().

Grâce à la méthode traduire(), l'élément est déplacé de sa position actuelle, en fonction de la position gauche (coordonnée x) et haut (coordonnée y) donnée paramètres :

La valeur translation(50px,100px) déplace l'élément de 50 pixels vers la gauche et de 100 pixels vers le haut.

Méthode rotate()

Grâce à la méthode rotate(), l'élément est tourné dans le sens des aiguilles d'une montre d'un angle donné. Les valeurs négatives sont autorisées et l'élément pivotera dans le sens inverse des aiguilles d'une montre.

La valeur rotate(30deg) fait pivoter l'élément de 30 degrés dans le sens des aiguilles d'une montre.

Méthode scale()

Avec la méthode scale(), la taille de l'élément augmentera ou diminuera, selon les paramètres donnés de largeur (axe X) et de hauteur (axe Y) :

L'échelle de valeurs (2,4) convertit la largeur en 2 fois la taille d'origine et la hauteur en 4 fois la hauteur d'origine.

Méthode skew()

Grâce à la méthode skew(), l'élément est retourné de l'angle donné, en fonction des paramètres de ligne horizontale (axe X) et de ligne verticale (axe Y) donnés :

La valeur skew(30deg,20deg) retourne l'élément de 30 degrés autour de l'axe X et de 20 degrés autour de l'axe Y.

Méthode matrix()

La méthode matrix() combine toutes les méthodes de transformation 2D ensemble. La méthode

matrix() prend six paramètres et contient des fonctions mathématiques qui vous permettent de : faire pivoter, mettre à l'échelle, déplacer et incliner des éléments.

Nouvelles propriétés de transformation

Le tableau suivant répertorie toutes les propriétés de transformation :

transform applique une transformation 2D ou 3D à un élément.

transform-origin permet de changer la position de l'élément transformé.

Méthode de transformation 2D

matrix(n,n,n,n,n,n) définit la transformation 2D, en utilisant une matrice de six valeurs.

translate(x,y) définit une transformation 2D qui déplace les éléments le long des axes X et Y.

translateX(n) définit une transformation 2D qui déplace les éléments le long de l'axe X.

translateY(n) définit une transformation 2D qui déplace les éléments le long de l'axe Y.

scale(x,y) définit la transformation de mise à l'échelle 2D, modifiant la largeur et la hauteur de l'élément.

scaleX(n) définit la transformation de mise à l'échelle 2D, modifiant la largeur de l'élément.

scaleY(n) définit la transformation de mise à l'échelle 2D, modifiant la hauteur de l'élément.

rotate(angle) définit la rotation 2D et spécifie l'angle dans les paramètres.

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

skewX(angle) définit une transformation d'inclinaison 2D, le long de l'axe X.

skewY(angle) définit une transformation d'inclinaison 2D, le long de l'axe Y.

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

Lecture connexe :

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

Introduction détaillée à l'attribut border-image dans Css3

Étapes pour obtenir un effet de flamme avec la police 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!