Transformation CSS3 2D

Transformations CSS3 2D

Transformations CSS3

Transformations CSS3, nous pouvons déplacer, redimensionner, inverser, faire pivoter et étirer des éléments.

Comment ça marche ?

L'effet de transformation permet à un élément de changer de forme, de taille et de position.

Vous pouvez convertir vos éléments en 2D ou en 3D.

Conversion 2D

Dans ce chapitre, vous découvrirez les méthodes de transformation 2D :

translate()

rotate()

scale()

skew()

matrix()

méthode translation()

La méthode translate() se déplace à partir de la position actuelle de l'élément en fonction des paramètres donnés par les positions gauche (axe X) et supérieure (axe Y).

transform: translate(50px,100px);

La valeur de traduction (50px, 100px) est déplacée de 50 pixels depuis l'élément de gauche et de 100 pixels depuis le haut.

Méthode Rotate()

Méthode Rotate(), fait pivoter un élément dans le sens des aiguilles d'une montre d'un degré donné. Les valeurs négatives sont autorisées, ce qui fait tourner l'élément dans le sens inverse des aiguilles d'une montre.

transform: rotate(30deg);

rotate value (30deg) L'élément pivote de 30 degrés dans le sens des aiguilles d'une montre.

Méthode scale()

méthode scale(), l'élément augmente ou diminue en taille, en fonction des paramètres de largeur (axe X) et de hauteur (axe Y) :

transform: scale(2,4);

scale(2,4) convertit la largeur à l'original 2 fois la taille et 4 fois la hauteur de sa taille originale.

Méthode Skew()

Méthode Skew(), cet élément sera basé sur l'horizontale (axe X) et la verticale (Y -axis) paramètres de ligne Étant donné un angle :

transform: skew(30deg,20deg);

skew(30deg,20deg) est l'élément qui est à 20 degrés et 30 degrés autour des axes X et Y.

méthode matrix()

la méthode matrix() et la méthode de transformation 2D sont fusionnées en une seule. La méthode matricielle

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

comporte six paramètres, dont les fonctions de rotation, de mise à l'échelle, de mouvement (translation) et d'inclinaison.