Fonctions de transformation en CSS
Qu'est-ce que les fonctions de transformation ?
Les fonctions de transformation en CSS permettent de modifier l'apparence des éléments HTML en appliquant des transformations telles que la mise à l'échelle, la rotation, ou même la déformation des éléments. Grâce à la propriété transform, vous pouvez effectuer des manipulations en 2D et en 3D. Par exemple, pour déplacer un élément vers le bas de la page, vous pouvez utiliser une transformation comme ceci :
.shifted {
transform: translate(0px, 100px);
}Les fonctions de transformation courantes
Voici quelques-unes des fonctions de transformation les plus utilisées en CSS :
- rotate() : cette fonction fait pivoter un élément autour d'un point fixe dans un espace 2D.
- scale() : permet de modifier la taille d'un élément, le rendant plus grand ou plus petit.
- skew() : incline un élément sur l'axe x ou sur les axes x et y dans un plan 2D.
- translate() : déplace un élément le long des axes X et Y.
- translateX() : déplace un élément uniquement sur l'axe horizontal.
- translateY() : déplace un élément uniquement sur l'axe vertical.
Autres propriétés liées aux transformations
En complément des fonctions de transformation, il existe d'autres propriétés CSS essentielles :
- transform-origin : détermine le point d'origine autour duquel l'élément sera transformé.
- transform-style : spécifie comment les enfants d'un élément sont positionnés dans l'espace 3D ou s'ils sont aplatis.
