Vous voulez déplacer, tourner ou agrandir un élément sur votre page web ? Vous cherchez comment utiliser la propriété CSS `transform` sans tout casser ? Vous n’êtes pas sûr de la différence entre `translate`, `rotate` ou `scale` ?
Cet article vous explique clairement comment maîtriser cette propriété. Vous y trouverez des exemples de code simples, la syntaxe de chaque fonction et un tableau récapitulatif pour trouver l’information dont vous avez besoin en un coup d’œil.
Tableau Récapitulatif des Fonctions transform
Pour aller droit au but, voici un tableau qui résume les principales fonctions de la propriété `transform`. C’est une référence rapide pour trouver la bonne syntaxe et comprendre ce que fait chaque valeur.
| Fonction | Description | Exemple de code |
|---|---|---|
translate(x, y) |
Déplace l’élément sur l’axe horizontal (x) et vertical (y). | transform: translate(50px, 20px); |
translateX(x) |
Déplace l’élément uniquement sur l’axe horizontal. | transform: translateX(100px); |
translateY(y) |
Déplace l’élément uniquement sur l’axe vertical. | transform: translateY(-50%); |
scale(x, y) |
Agrandit ou réduit l’élément. 1 = taille normale. | transform: scale(1.5, 0.8); |
scaleX(x) |
Change l’échelle uniquement sur l’axe horizontal. | transform: scaleX(2); |
scaleY(y) |
Change l’échelle uniquement sur l’axe vertical. | transform: scaleY(0.5); |
rotate(angle) |
Fait pivoter l’élément. L’unité la plus courante est `deg`. | transform: rotate(45deg); |
skew(x-angle, y-angle) |
Incline l’élément sur les deux axes. | transform: skew(20deg, 10deg); |
skewX(angle) |
Incline l’élément uniquement sur l’axe horizontal. | transform: skewX(30deg); |
skewY(angle) |
Incline l’élément uniquement sur l’axe vertical. | transform: skewY(-15deg); |
matrix(...) |
Combine toutes les transformations 2D en une seule déclaration. | transform: matrix(1, -0.3, 0, 1, 0, 0); |
Les Nouvelles Propriétés de Transformation Individuelles
Avant, il n’y avait que la propriété `transform`. Si vous vouliez changer juste la rotation d’un élément au survol (`:hover`), vous deviez réécrire toutes les autres transformations avec. C’était lourd et source d’erreurs.
Depuis 2022 (Chrome 104), les navigateurs modernes supportent des propriétés individuelles : translate, rotate, et scale. Ça simplifie beaucoup le code, surtout pour les animations. Vous pouvez maintenant modifier une seule transformation sans toucher aux autres.
Voici la différence pour faire pivoter un élément qui est déjà déplacé.
Avant (compliqué) :
.element {
transform: translateX(50px);
}
.element:hover {
transform: translateX(50px) rotate(20deg); /* On doit répéter translateX */
}Maintenant (simple) :
.element {
translate: 50px 0;
}
.element:hover {
rotate: 20deg; /* On ajoute juste la rotation */
}Exploration Détaillée des Fonctions
Voyons plus en détail comment fonctionnent les principales familles de transformations CSS.
Le déplacement avec translate()
La fonction `translate()` sert à déplacer un élément de sa position initiale. Elle ne perturbe pas les autres éléments de la page. Vous pouvez utiliser des pixels (`px`), des `em`, des `rem` ou des pourcentages (`%`).
Attention, quand vous utilisez des pourcentages, ils sont calculés par rapport à la taille de l’élément lui-même, pas de son parent. C’est très pratique pour centrer des éléments.
translateX(valeur): déplace sur l’axe horizontal.translateY(valeur): déplace sur l’axe vertical.translate(valeurX, valeurY): déplace sur les deux axes.
/* Déplace l'image de 100 pixels vers la droite */
img {
transform: translateX(100px);
}La mise à l’échelle avec scale()
Avec `scale()`, vous pouvez agrandir ou rétrécir un élément. C’est une fonction qui n’utilise pas d’unité (comme `px` ou `deg`). C’est un simple multiplicateur.
- Une valeur de 1 correspond à la taille d’origine (100%).
- Une valeur supérieure à 1 (ex: `scale(1.5)`) agrandit l’élément.
- Une valeur inférieure à 1 (ex: `scale(0.7)`) le rétrécit.
Vous pouvez définir une échelle différente pour l’axe horizontal (X) et vertical (Y) avec `scale(valeurX, valeurY)`.
/* Agrandit le bouton de 20% au survol */
button:hover {
transform: scale(1.2);
}La rotation avec rotate()
La fonction `rotate()` permet de faire pivoter un élément autour de son point d’origine (le centre, par défaut). L’unité la plus utilisée est le degré (`deg`). Une valeur positive tourne l’élément dans le sens des aiguilles d’une montre.
Vous pouvez aussi utiliser d’autres unités comme les radians (`rad`) ou les tours (`turn`). Par exemple, `rotate(0.5turn)` est équivalent à `rotate(180deg)`.
/* Fait pivoter une icône de 30 degrés */
.icon {
transform: rotate(30deg);
}L’inclinaison avec skew()
Moins courante, la fonction `skew()` incline ou déforme un élément sur un ou deux axes. Elle prend aussi des angles en degrés (`deg`) comme valeur.
skewX(angle)incline l’élément le long de l’axe horizontal.skewY(angle)l’incline le long de l’axe vertical.skew(angleX, angleY)combine les deux.
/* Incline une div de 20 degrés horizontalement */
.box {
transform: skewX(20deg);
}Points Clés et Propriétés Associées
Pour bien utiliser `transform`, il faut connaître deux autres concepts importants : l’ordre des fonctions et le point d’origine.
Combiner plusieurs transformations
Vous pouvez appliquer plusieurs transformations à un même élément en les listant dans la même propriété `transform`. Mais attention, l’ordre des fonctions est crucial. Le navigateur les applique de gauche à droite.
Par exemple, `transform: rotate(45deg) scale(1.5)` ne donnera pas le même résultat que `transform: scale(1.5) rotate(45deg)`. Dans le premier cas, l’élément est d’abord tourné, puis agrandi. Dans le second, il est d’abord agrandi, puis tourné.
La propriété transform-origin
Par défaut, toutes les transformations (rotation, mise à l’échelle) s’effectuent depuis le centre de l’élément (`50% 50%`). La propriété `transform-origin` vous permet de changer ce point de pivot.
C’est très utile pour des animations. Par exemple, pour faire pivoter un élément comme une aiguille d’horloge, vous changerez son point d’origine.
.aiguille {
/* Le point de rotation est maintenant en bas au centre */
transform-origin: bottom center;
transform: rotate(90deg);
}Un aperçu des transformations 3D
La propriété `transform` ne se limite pas à la 2D. Il existe aussi des fonctions pour manipuler les éléments dans un espace 3D. Elles sont plus complexes mais permettent de créer des effets de profondeur.
Voici quelques fonctions 3D :
translate3d(x, y, z)outranslateZ(z)pour la profondeur.scale3d(x, y, z)ouscaleZ(z).rotate3d(x, y, z, angle),rotateX(angle),rotateY(angle).- La propriété
perspectiveest souvent nécessaire sur le conteneur parent pour que les effets 3D soient visibles.
FAQ sur la propriété CSS Transform
Comment animer la propriété transform ?
Pour créer une animation fluide, vous devez utiliser la propriété `transform` avec les propriétés CSS `transition` ou `animation`. La propriété `transition` est plus simple pour les effets au survol, tandis que `animation` permet des scénarios plus complexes avec des étapes clés (`@keyframes`).
transform: translate(-50%, -50%) centre-t-il vraiment un élément ?
Oui, c’est une technique très populaire pour centrer parfaitement un élément horizontalement et verticalement. Mais elle ne fonctionne qu’en combinaison avec d’autres propriétés : `position: absolute;`, `top: 50%;` et `left: 50%;` sur l’élément à centrer.
Quelle est la compatibilité de `transform` avec les navigateurs ?
La compatibilité est excellente sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Il y a quelques années, il fallait utiliser des préfixes comme `-webkit-transform`, mais ce n’est quasiment plus nécessaire aujourd’hui, sauf si vous devez supporter de très vieilles versions de navigateurs.
