web-dev-qa-db-fra.com

Comment utiliser la transformation matricielle et d'autres propriétés CSS de transformation?

Lorsque vous utilisez la propriété transform en CSS, l'une des méthodes possibles est la méthode matrix qui nécessite 6 champs de saisie. Le code CSS ressemblerait à quelque chose comme ...

#test{
    transform: matrix(1, 0, 0, 1, 0, 0);
}

Il existe également quelques autres variantes (selon le navigateur) ...

-ms-transform: matrix(1, 0, 0, 1, 0, 0);

-webkit-transform: matrix(1, 0, 0, 1, 0, 0);

Je sais que les valeurs indiquées ci-dessus sont les valeurs boursières d'un objet, mais que signifient ou font tous les chiffres?

csstransformcss-transforms
32
Birrel

La propriété de transformation mentionnée ci-dessus appartient à la catégorie Transformations 2D des propriétés CSS. En plus de la méthode matrix() mentionnée ci-dessus, il existe quelques autres méthodes qui accompagnent la transformation:

translate(), rotate(), scale() et skew()

Pour comprendre la méthode matrix(), il est préférable de comprendre d'abord les quatre autres types.

TRANSFORMATIONS:

Ces quatre méthodes de transformation sont exactement comme elles sonnent.

TRADUIRE:

Consultez l'exemple de traduction ici .

translate(e, f) prend deux arguments. Le premier argument est la position x de l'élément, tandis que le second est la position y - les deux par rapport à sa position initiale. Si vous vouliez déplacer un élément de 50 pixels vers la droite et de 100 pixels vers le bas, le CSS ressemblerait à transform: translate(50px, 100px);. Le X positif a raison, le Y positif est en baisse; les nombres négatifs déplacent l'élément dans la direction opposée.

Translate

ROTATION:

Consultez l'exemple de rotation ici .

rotate(c) prend un argument, qui est la quantité de rotation que vous souhaitez que l'élément ait. La rotation positive est dans le sens horaire, la négative est dans le sens antihoraire. La rotation d'un élément de 30 degrés dans le sens des aiguilles d'une montre (positive) ressemblerait à transform: rotate(30deg);. Notez que cette fois l'argument est dans deg et paspx.

Rotate

ÉCHELLE:

Consultez l'exemple d'échelle ici .

scale(a, d) prend deux arguments. Le premier argument est le montant à l'échelle dans la direction X, tandis que le deuxième argument est le montant à l'échelle dans la direction Y. La mise à l'échelle fonctionne en multipliant la valeur actuelle (largeur, hauteur) par la valeur d'échelle. La mise à l'échelle d'un élément de 2 fois dans la direction X et de 4 fois dans la direction Y ressemblerait à transform: scale(2, 4);. Les arguments peuvent être n'importe quelle valeur, y compris les décimales, et même négatifs. Les valeurs négatives ont pour effet de renverser l'élément autour de l'axe respectif.

Scale

SKEW:

Consultez l'exemple de biais ici .

skew(b, c) est potentiellement la transformation la plus déroutante à expliquer. skew(c, d) prend deux arguments. Le premier argument correspond aux surfaces horizontales (haut et bas), tandis que le second argument correspond aux surfaces verticales (gauche et droite). Les deux arguments sont dans deg, similaire à celui de rotate(). Les valeurs positives pour le premier argument feront pivoter les surfaces verticales dans le sens antihoraire autour de leurs points centraux. Les valeurs négatives feront pivoter les surfaces verticales dans le sens des aiguilles d'une montre autour de leurs points centraux. Les valeurs positives pour le deuxième argument font tourner les surfaces horizontales dans le sens horaire autour de leurs points centraux, tandis que les valeurs négatives font pivoter les surfaces horizontales dans le sens antihoraire. La limite (en degrés) pour chaque argument est + -90deg - comme le montre l'exemple suivant.

Skew

MATRICE:

Consultez l'exemple de matrice ici .

matrix(a, b, c, d, e, f) fait tout ce que fait la transformation listée précédemment.

Les deux arguments, a et d servent à mettre à l'échelle l'élément dans la direction X et la direction Y, respectivement. Identiquement à celui de la méthode scale(a, d).

Les deuxième et troisième arguments b et c sont pour biaiser l'élément. Les deux valeurs fonctionnent à l'identique à celle de la méthode skew(b, c).

Enfin, les deux derniers arguments e et f sont destinés à traduire l'élément dans la direction X et la direction Y, respectivement. Identiquement à celui de la méthode translate(e, f).

Vous pouvez utiliser la transformation matrix() pour obtenir une quantité incroyable d'effets. Jetez un œil au site Web this , où le défilement de la page (sur les ordinateurs, pas sur les appareils mobiles) entraîne la transformation des éléments de la page via la méthode matrix(). Cela fait un grand effet!

Enfin, il existe différentes syntaxes pour différents navigateurs. Selon w3schools ici ce sont les suivants

transform:
-ms-transform: /* IE 9 */
-webkit-transform: /* Safari and Chrome */

La meilleure pratique consiste à les tester sur différents navigateurs avant de lancer votre site.

Pour plus d'informations sur les différentes transformations 2D, consultez ce lien . Pour les mathématiques derrière la méthode matrix(), consultez ce lien .

87
Birrel

Au lieu de passer du temps à essayer d'enrouler votre tête autour de matrices lorsque vous n'avez pas de formation mathématique, je recommande de comprendre les autres transformations et de savoir comment les combiner sur une seule ligne, car si vous essayez de les séparer, seule la dernière directive est exécutée.

Au lieu de cela

#shape {
    transform: rotate(40deg);
    transform: translate(100px, 30px);
    transform: scale(0.8, 0.4);
}

Faites ceci à la place:

#shape {
    transform: rotate(40deg) translate(100px, 30px) scale(0.8, 0.4)
}

Et cela vous donne le résultat souhaité que vous pouvez enrouler autour de votre tête et a autant de puissance que la matrice.

6
djynnius