Les transformations CSS vous permettent de modifier la forme et la position des éléments HTML.
La propriété `transform` est utilisée pour appliquer des transformations 2D ou 3D. En 2D, vous pouvez modifier la taille d’un élément (scale), le déplacer (translate), le tourner (rotate) et le déformer (skew). En 3D, vous pouvez également déplacer un élément le long de l’axe z, le tourner autour d’un axe arbitraire et appliquer une perspective pour créer une illusion de profondeur.
Voici comment vous pouvez utiliser les transformations en CSS:
1. Scale: pour scanner un élément, vous pouvez utiliser la fonction `scale()`. Par exemple, `transform: scale(1.5);` agrandit un élément de 50%.
1. Translate: pour déplacer un élément, vous pouvez utiliser la fonction `translate()`. Par exemple, `transform: translate(30px, 50px);` déplace un élément de 30px vers la droite et de 50px vers le bas.
1. Rotate: pour tourner un élément, vous pouvez utiliser la fonction `rotate()`. Par exemple, `transform: rotate(20deg);` tourne un élément de 20 degrés dans le sens des aiguilles d’une montre.
1. Skew: pour déformer un élément, vous pouvez utiliser la fonction `skew()`. Par exemple, `transform: skew(10deg, 20deg);` déforme un élément le long des axes x et y.
1. Transformations 3D: pour appliquer des transformations 3D, vous pouvez utiliser les fonctions `rotateX()`, `rotateY()`, `rotateZ()`, `translateZ()` et `perspective()`. Par exemple, `transform: perspective(500px) rotateY(20deg);` applique une perspective et tourne un élément autour de l’axe Y.
1. Combine transformations: vous pouvez combiner plusieurs transformations en les listant dans la propriété `transform`. Par exemple, `transform: rotate(20deg) scale(1.5);` tourne d’abord un élément puis le redimensionne.
Notez que certaines transformations peuvent déformer l’apparence initiale des éléments. Pour surmonter ce problème, vous pouvez utiliser la propriété `transform-origin` pour changer le point autour duquel une transformation est appliquée.
