Comment utiliser les fonctions de transformation 2D en CSS –

Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Transforms nous permet de créer des effets et interactions autrement impossibles . Lorsque combiné avec des transitions et des animations, nous pouvons créer des éléments et des interfaces qui tournent, dansent et zooment. Les transformations tridimensionnelles, en particulier, permettent d’imiter des objets physiques. Dans cet article, nous examinerons les fonctions de transformation 2D ( Les fonctions 3D sont traitées ici ).

Il existe quatre fonctions de transformation bidimensionnelles principales: rotate scale skew et traduisent . Six autres fonctions nous permettent de transformer un élément en une seule dimension: scaleX et scaleY ; skewX et skewY ; et translateX et translateY .

rotate ()

Une transformation de rotation fait tourner un élément autour de son origine selon l'angle spécifié autour de l'origine de transformation point. En utilisant rotate () un élément s'incline dans le sens des aiguilles d'une montre (valeurs d'angle positif) ou dans le sens inverse (valeurs d'angle négatif). Son effet ressemble beaucoup à un moulin à vent ou à un moulin à vent, comme on le voit ci-dessous.

) La fonction accepte les valeurs en unités d’angle. Les unités d'angle sont définies par le CSS Values ​​and Units Module Level 3 . Celles-ci peuvent être des unités deg (degrés), rad (radians), grad (gradiens) ou . Une rotation complète est égale à 360deg 6.28rad 400grad ou 1 .

Valeurs de rotation supérieures à une rotation ( dis, 540deg ou 1.5turn ) sont rendus selon leur valeur restante, sauf s'ils sont animés ou en transition. En d'autres termes, 540deg est rendu identique à 180deg (540 degrés moins 360 degrés) et 1.5turn est rendu identique à .5turn (1,5 – 1). Mais une transition ou une animation de 0deg à 540deg ou 1turn à 1.5turn fera pivoter l'élément une fois et demi

Fonctions de mise à l'échelle 2D: scale scaleX et scaleY

Avec les fonctions de mise à l'échelle, nous pouvons augmenter ou diminuer la taille de rendu d'un élément dans X -dimension ( scaleX ), dimension Y ( scaleY ), ou les deux (échelle ). La mise à l'échelle est illustrée ci-dessous, où la bordure illustre les limites d'origine de la boîte et le signe + marque son centre.

] Chaque fonction d'échelle accepte un multiplicateur ou un facteur comme argument. Ce multiplicateur peut être à peu près n'importe quel nombre positif ou négatif. Les pourcentages ne sont pas pris en charge. Les multiplicateurs positifs supérieurs à 1 augmentent la taille d'un élément. Par exemple, l'échelle (1.5) augmente la taille de l'élément dans les directions X et Y 1,5 fois. Des multiplicateurs positifs entre 0 et 1 réduiront la taille d'un élément.

Des valeurs inférieures à 0 feront également augmenter ou diminuer un élément taille et créer une transformée de réflexion (flip).

Avertissement: L'utilisation de scale (0) entraînera la disparition de l'élément car la multiplication d'un nombre par zéro produit un produit égal à zéro.

À l’aide de scale (1) crée une transformation d’identité ce qui signifie qu’elle est dessinée à l’écran comme si aucune transformation de mise à l’échelle n’était appliquée. En utilisant scale (-1) vous ne modifierez pas la taille dessinée d’un élément, mais la valeur négative provoquera la réflexion de l’élément. Même si l’élément ne semble pas transformé, il déclenche toujours un nouveau contexte d’empilement et contient un bloc.

Il est possible de mettre à l’échelle les dimensions X et Y séparément à l’aide de la fonction . Il suffit de lui passer deux arguments: scale (1.5, 2) . Le premier argument met à l'échelle la dimension X; la seconde met à l'échelle la dimension Y. Nous pourrions, par exemple, refléter un objet le long de l'axe des X seul en utilisant échelle (-1, 1) . Passer un argument unique met à l'échelle les deux dimensions par le même facteur.

Fonctions de traduction 2D: translateX translateY et translate

de sa position de mise en page à la distance spécifiée. Comme pour les autres transformations, la traduction d’un élément ne change pas ses positions offsetLeft ou offsetTop . Cependant, elle affecte la position visuelle de l'écran.

Chaque fonction de traduction 2D – translateX translateY et traduisent – accepte les longueurs ou les pourcentages pour des arguments. Les unités de longueur comprennent les pixels ( px ), et rem et les unités de fenêtre ( vw et vh )

La fonction translateX modifie la position de rendu horizontal d'un élément. Si un élément est positionné à zéro pixel de la gauche, la transformation : transitionX (50px) décale sa position rendue de 50 pixels à droite de sa position de départ. De même, translateY modifie la position de rendu vertical d'un élément. Une transformée de transform: transitionY (50px) décale l'élément verticalement de 50 pixels.

Avec translate () on peut décaler un élément verticalement et horizontalement en utilisant une seule fonction. Il accepte jusqu'à deux arguments: la valeur de traduction X et la valeur de traduction Y. La figure ci-dessous montre l'effet d'un élément avec une valeur de transform de translate (120%, -50px) où le carré vert gauche est dans la position d'origine et le vert droit square est traduit à 120% horizontalement et à -50px verticalement à partir de son élément contenant (la bordure en pointillés).

[19659003] Passer un seul argument à translate équivaut à utiliser translateX ; la valeur de traduction Y sera fixée à 0 . L'utilisation de translate () est l'option la plus concise. Appliquer translate (100px, 200px) est l'équivalent de translateX (100px) translateY (200px) .

Des valeurs de translation positives déplacent un élément vers la droite (pour traductionX ) ou à la baisse (pour traductionY ). Les valeurs négatives déplacent un élément vers la gauche ( translateX ) ou vers le haut ( traductionY ).

Les traductions sont particulièrement utiles pour déplacer des éléments vers la gauche, la droite, le haut ou le bas. La mise à jour de la valeur des propriétés à gauche à droite et en bas force le navigateur à recalculer les informations de présentation pour le document entier. Mais les transformations sont calculées après la mise en page a été calculée. Ils affectent l'endroit où les éléments apparaissent à l'écran, mais pas leurs dimensions réelles. Oui, il est étrange de penser à la mise en page et au rendu des documents en tant que concepts séparés, mais en termes de navigateurs, ils le sont.

Les propriétés de transformation peuvent arriver dans un navigateur

La ​​dernière version de la spécification CSS Transforms ajoute traduire pivoter et échelle propriétés en CSS. Les propriétés de transformation fonctionnent comme leurs fonctions de transformation correspondantes, mais les valeurs sont séparées par des espaces plutôt que par des virgules. On pourrait, par exemple, exprimer la transformation : rotate3d (1, 1, 1, 45deg) en utilisant la propriété rotate : rotate: 1 1 1 45deg . De même, translate: 15% 10% 300px est visuellement identique à transform: translate3d (15%, 10%, 300px) et échelle: 1,5 1,5 3 est identique à transform: scale3d (1,5, 1,5, 3) . Avec ces propriétés, nous pouvons gérer les transformations de rotation, de translation ou d'échelle séparément des autres transformations. Chrome et Samsung Internet les prennent en charge immédiatement. Dans les versions 60 et ultérieures de Firefox, le support est masqué par un drapeau. visitez à propos de: config et définissez layout.css.individual-transform.enabled sur true .

skewX skewX ]et skewY

Les transformations obliques décalent les angles et les distances entre les points tout en les maintenant dans le même plan. Les transformations d'inclinaison sont également connues sous le nom de transformations de cisaillement et elles déforment les formes des éléments, comme indiqué ci-dessous, où la ligne en pointillés représente le cadre de délimitation original de l'élément.

45 degrés le long de sa dimension en X  » width= »1248″ height= »628″ class= »aligncenter size-full wp-image-168514″/>

Les fonctions d'inclinaison skewY skewX et skewY acceptent la plupart des unités d'angle comme arguments. Les degrés, les gradiens et les radians sont des unités d'angle valides pour les fonctions d'inclinaison, alors que les unités de virage ne le sont pas.

La fonction skewX cisaille un élément dans la direction X ou horizontale au dessous de). Il accepte un seul paramètre, qui doit également être une unité d'angle. Les valeurs positives décalent l'élément vers la gauche et les valeurs négatives le décalent vers la droite.

] De même, skewY cisaille un élément dans la direction Y ou verticale. L'image ci-dessous montre l'effet de transform: skewY (30deg) . Les points à droite de l'origine sont décalés vers le bas avec des valeurs positives. Les valeurs négatives décalent ces points vers le haut.

Ceci nous amène à la fonction . La fonction de skew nécessite un argument, mais accepte jusqu'à deux. Le premier argument incline un élément dans la direction X et le second le désoriente dans la direction Y. Si un seul argument est fourni, la seconde valeur est supposée être égale à zéro, ce qui en fait l'équivalent de l'inclinaison dans la direction X uniquement. En d'autres termes, skew (45deg) est identique à skewX (45deg) .

Current Transform Matrix

Jusqu'à présent, nous avons discuté des fonctions de transformation séparément, mais ils peuvent également être combinés. Voulez-vous mettre à l'échelle et faire pivoter un objet? Pas de problème: utilisez une liste de transformations . Par exemple:

 .rotatescale {
    transformer: faire pivoter (45deg) l'échelle (2);
}

Ceci produit les résultats que vous voyez ci-dessous.

C’est un point qu’il vaut mieux montrer qu’en parler, alors regardons un exemple pour illustrer. Le CSS suivant incline et fait pivoter un élément:

 .transformEl {
    transformer: le biais (10deg, 15deg) tourne (45deg);
}

Cela nous donne le résultat que vous voyez ci-dessous.

Que se passe-t-il si vous faites pivoter un élément inclinez-le?

 .transformEl {
    transformer: faire pivoter (45deg) l'inclinaison (10deg, 15deg);
}

L'effet montré ci-dessous est très différent.

Chacune de ces transformées a une matrice de transformation de courant différente créé par l'ordre de ses fonctions de transformation. Pour bien comprendre pourquoi, nous devons apprendre un peu de la multiplication de matrices . Cela nous aidera également à comprendre les fonctions de matrice et matrix3d ​​.

Multiplication matricielle et fonctions matricielles

Une matrice est un tableau de nombres ou expressions disposées dans un rectangle de lignes et de colonnes. Toutes les transformées peuvent être exprimées en utilisant une matrice 4 × 4, comme on le voit ci-dessous.

Cette matrice correspond à la fonction matrix3d ​​ accepte 16 arguments, un pour chaque valeur de la matrice 4 × 4. Les transformées bidimensionnelles peuvent également être exprimées en utilisant une matrice 3 × 3, vue ci-dessous.

Cette matrice 3 × 3 correspond à la fonction de transformation de la matrice . La fonction matrix () accepte six paramètres, un pour les valeurs et à f .

Chaque fonction de transformation peut être décrite en utilisant une matrice et le fonctions de matrice ou matrix3d ​​. L'image ci-dessous montre la matrice 4 × 4 pour la fonction scale3d où sx sy et sz sont les facteurs d'échelle de les dimensions X, Y et Z respectivement.

[19659003] Lorsque nous combinons des transformées, telles que transform: scale (2) translate (30px, 50px) le navigateur multiplie les matrices pour chaque fonction afin de créer une nouvelle matrice. Cette nouvelle matrice est ce que l’on applique à l’élément. Avec des valeurs simples, le produit de 3 × 2 est identique à 2 × 3. Avec des matrices, cependant, le produit de A × B n'est pas nécessairement le même que celui de B × A . Regardons un exemple. Nous calculerons le produit de matrice de transform: scale (2) translate (30px, 50px) .

Notre élément a été réduit d'un facteur deux, puis traduit 60 pixels horizontalement et 100 pixels verticalement. On peut également exprimer ce produit en utilisant la fonction de la matrice : transform: matrix (2, 0, 0, 2, 60, 100) . Passons maintenant à l’ordre de ces transformations, c’est-à-dire transform: translate (30px, 50px) scale (2) . Les résultats sont présentés ci-dessous.

Notez que notre objet est encore mis à l'échelle par un facteur de deux, mais il est traduit ici par 30 pixels horizontalement et 50 pixels verticalement. Exprimé à l'aide de la fonction matrix il s'agit de transform: matrix (2, 0, 0, 2, 30, 50) .

Il convient également de noter que les transformations héritées fonctionnent de la même manière que transformer des listes. Chaque transformation enfant est multipliée par toute transformation appliquée à son parent. Par exemple, prenez le code suivant:

Ceci est identique à celui-ci:

La matrice de transformée de courant de l'élément p sera la même dans les deux cas. Bien que nous nous soyons concentrés jusqu’à présent sur les transformations 2D, ce qui précède s’applique également aux transformations 3D. La troisième dimension ajoute l'illusion de profondeur. Il apporte également une complexité supplémentaire sous la forme de nouvelles fonctions et propriétés.

Tiffany B. Brown est développeur web indépendant et rédacteur technique basé à Los Angeles. Brown offre des services de développement Web et de conseil à de grandes agences et à de petites entreprises. Ancien membre de l'équipe des relations avec les développeurs d'Opera Software, Brown est également co-auteur du livre JumpStart HTML5 de SitePoint. Elle écrit de façon sporadique sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à @webinista .