Transformation
Introduction
Les transformations sont un moyen de changer la forme et la position des éléments HTML à partir d'opération géométrique sans modifier le flux normal de la page Web. Elles sont utiles pour créer des effets visuels intéressant, entres autres si utilisé conjointement avec les transitions ou les animations pour déplacer ou modifier des éléments de façon agréable à l'écran. Dans ce document, nous survolerons les transformations de base que CSS nous permet de faire.
Les transformations utilisent des calculs mathématiques matriciels pour générer les modifications. Par conséquant, ces transformations sont généralement calculé par le processeur graphique de votre ordinateur (GPU) puisque celui-ci est plus performant que votre processeur régulier pour ce type d'opération.
Syntaxe
La syntaxe de base d'une transformation est la suivante:
Il est aussi possible d'appliquer plusieurs transformation géométrique. Pour ce faire, nous devons simplement indiquer chaque fonction de transformation, les unes après les autres, directement dans la propriété transform.
Il existe plusieurs fonctions de transformations déjà intégré dans les navigateurs. Nous utiliserons majoritairement ces fonctions déjà établies, mais il est possible de créer nos propres transformation avec de bonnes connaissanses en mathématique. Dans cette page, nous verrons comment utiliser les fonctions existantes que vous utiliserez le plus souvent.
Translation
La fonction translate(x, y) indique une translation en X et Y. Les unités de mesure accepté pour cette transformation sont les même que les unités de distance habituelle, comme le px, le em, le % ou autre.
Homothétie
La fonction scale(x, y) indique une mise à l'échelle (homothétie) en X et Y qui aggrandie, rétricie ou crée un effet mirroir. Il n'y a pas d'unité de mesure pour cette fonction. La valeur 1 indique que l'on garde la même taille et la valeur 0 indique une taille de zéro, donc inexistante. Ainsi, si la valeur est entre 0 et 1, on a un rapetissement et si la valeur est plus grande que 1, on a un agrandissement. Si la valeur est négative, il y aura un effet mirroir.
Rotation
La fonction rotate(angle) indique une rotation de l'élément d'un certain angle. L'angle sera généralement défini en degrés (deg) ou en radians (rad).
Déformation
La fonction skew(x, y) indique une distorsion oblique de l'élément d'un certain angle en X et en Y. Les angles spécifiés doivent utiliser les mêmes unités de mesure que dans la fonction de rotation, soit le degrés (deg) ou le radians (rad).
Transformation multiples
Il est possible de combiner plusieurs fonctions de transformation. Il suffit simplement des les enchaîner les unes après les autres dans la propriété transform.
Origine de transformation
Par défaut, les transformations se font à partir du centre de l'élément sur lequel nous appliquons la transformation. Il est toutefois possible d'appliquer la tranformation à partir d'un autre point dans l'élément à l'aide de de la propriété transform‑origin. Vous pouvez en apprendre davantage en consultant le lien suivant: