Faites glisser les curseurs rotate, scale, translate et skew et copiez le CSS et les classes Tailwind. Couvre l'ordre des transformations, transform-origin, le retournement de carte en 3D et les animations fluides.
Déplacez, faites pivoter, redimensionnez ou inclinez un élément avec la propriété transform : transform: translate(20px, 0) rotate(15deg) scale(1.1) skewX(5deg). Les fonctions s'appliquent de droite à gauche, donc leur ordre change le résultat. Les transformations ne décalent jamais la mise en page environnante, et les animer coûte peu car le navigateur peut confier le travail au compositeur.
Les quatre fonctions de transformation 2D
Fonction
Exemple
Tailwind
translate()
translate(1rem, -50%)
translate-x-4 -translate-y-1/2
rotate()
rotate(45deg)
scale()
scale(1.1)
skew()
skewX(6deg)
Utilisez les curseurs pour construire une transformation et regardez une carte réagir, puis basculez entre la propriété transform unique et les propriétés séparées translate, rotate et scale. Plus bas se trouvent la démo de l'origine, un flip 3D à survoler, des recettes de transitions et une explication de pourquoi les transformations restent fluides alors que top et left saccadent.
Faites glisser les curseurs translate, rotate, scale et skew. La carte bouge et le CSS se réécrit tout seul.
Choisissez un transform-origin pour voir quel point reste fixe pendant que la carte pivote ou grandit.
Basculez entre le raccourci transform combiné et les propriétés individuelles.
Copiez le CSS ou les classes Tailwind et collez-les dans votre feuille de style ou votre HTML.
Centrez une boîte en position absolue avec top: 50%; left: 50%; translate: -50% -50%. Les pourcentages de translate se rapportent à l'élément lui-même, pas à son parent.
Animez transform et opacity plutôt que width, height, top ou left. Ces autres propriétés imposent un recalcul de la mise en page à chaque image.
Les rotations au-delà de 360deg sont autorisées et comptent pour l'animation : rotate(720deg) fait deux tours lors d'une transition depuis 0.
N'ajoutez will-change: transform qu'aux éléments sur le point d'être animés, puis retirez-le. Le laisser partout consomme de la mémoire.
Questions fréquentes
Pourquoi l'ordre des fonctions de transformation compte-t-il ?
Chaque fonction modifie le système de coordonnées des fonctions écrites avant elle, donc la liste s'applique en pratique de droite à gauche. translate(100px) rotate(45deg) fait pivoter la boîte puis la fait glisser tout droit vers la droite, alors que rotate(45deg) translate(100px) la fait glisser le long de l'axe diagonal tourné.
Quelle est la différence entre transform: rotate() et la propriété rotate ?
Les propriétés rotate, scale et translate sont des versions autonomes des mêmes fonctions. On peut les définir et les animer séparément, donc un scale au survol n'efface pas une rotation définie ailleurs. Le navigateur applique d'abord translate, puis rotate, puis scale, puis tout ce qui se trouve dans transform.
Une transformation affecte-t-elle la mise en page ou les autres éléments ?
Non. L'élément garde sa boîte d'origine dans la mise en page et ses voisins ne bougent pas. Seule son image affichée change. Un élément transformé crée en revanche un nouveau contexte d'empilement et devient le bloc conteneur de ses descendants en position fixed, ce qui peut surprendre avec les modales.
Comment retourner un élément horizontalement ?
Utilisez transform: scaleX(-1) ou la propriété scale avec scale: -1 1. L'élément est inversé en miroir autour de son origine, qui est le centre par défaut. Pour un retournement 3D qui montre une face arrière, faites-le pivoter autour de l'axe Y dans un parent doté de perspective.
Pourquoi mon texte transformé est-il flou ?
Les translations fractionnaires et certaines valeurs de scale placent les glyphes entre deux pixels, ce qui les adoucit, surtout pendant une animation. Arrondir les valeurs de translate au pixel entier et mettre à l'échelle vers la taille finale plutôt qu'en agrandissant depuis une taille plus petite rend généralement le résultat plus net.
Lire une liste de transformations
Un modèle mental utile : partez de la dernière fonction et remontez jusqu'à la première, en déplaçant, faisant pivoter ou étirant à chaque fois l'élément dans son repère actuel, déjà modifié. Si un résultat semble faux, inverser la liste suffit souvent à le corriger.
Les pourcentages dans translate() mesurent la border box de l'élément lui-même. C'est pourquoi translate(-50%, -50%) centre une boîte dont on ne connaît pas la taille à l'avance.
Pourquoi les transformations s'animent en douceur
Les navigateurs affichent une page par étapes : style, mise en page, peinture et composition. Modifier top ou width relance la mise en page de l'élément et souvent de ses voisins. Modifier transform ou opacity permet généralement de passer directement à la composition, où une couche déjà peinte est déplacée par le processeur graphique.
C'est la raison pour laquelle les recommandations sur les animations désignent toujours ces deux propriétés. Si une animation perd des images, ouvrez le panneau de performances du navigateur et cherchez du travail de mise en page et de peinture dans chaque image.
La 3D en un paragraphe
Donnez une perspective au parent, par exemple 800px, pour que les enfants tournés sur X ou Y semblent s'éloigner. Des valeurs plus petites exagèrent la profondeur. transform-style: preserve-3d permet aux enfants imbriqués de partager cet espace 3D, et backface-visibility: hidden masque une face dès qu'elle se détourne, ce qui est le cœur de tout retournement de carte.
Toutes les fonctions de transformation
Fonctions de transformation 2D et 3D avec leurs utilitaires Tailwind
Fonction
Effet
Tailwind (v3 et v4 sauf mention contraire)
translate(x, y)
Déplace sur X et Y
translate-x-4, -translate-y-2, translate-x-[13px]
translateX() / translateY()
Déplace sur un seul axe
translate-x-1/2, translate-y-full
translateZ(z)
Rapproche ou éloigne de l'observateur (nécessite une perspective)
translate-z-4 (v4)
rotate(a)
Fait pivoter dans le sens horaire selon un angle (deg, turn, rad)
rotate-45, -rotate-12, rotate-[17deg]
rotateX(a) / rotateY(a)
Incline autour de l'axe horizontal ou vertical en 3D
rotate-x-45, rotate-y-180 (v4)
scale(s) / scale(x, y)
Agrandit ou réduit ; une valeur négative crée un miroir
scale-110, scale-x-75, -scale-x-100
skew(x, y) / skewX() / skewY()
Incline l'élément
skew-x-6, -skew-y-3
matrix(a, b, c, d, e, f)
Toutes les transformations 2D dans une seule matrice
valeur arbitraire : [transform:matrix(...)]
perspective(d)
Profondeur pour cet élément uniquement
perspective-[800px] sur le parent (v4)
Ordre des opérations
Les deux mêmes fonctions dans un ordre différent placent la boîte à un autre endroit. Les deux boîtes bleues partent du même point.
translate puis rotate, contre rotate puis translate
Dans la première boîte, le glissement se fait le long de l'axe X de l'écran. Dans la seconde, il suit l'axe tourné, donc la boîte finit plus bas.
Les propriétés individuelles ne s'écrasent pas entre elles
La règle de survol ne touche que scale, donc le rotate défini dans la règle de base est conservé. Avec le raccourci transform, il faudrait répéter rotate(-3deg) dans :hover.
Même rotation, trois origines
L'origine est le point qui reste fixe. center est la valeur par défaut ; top left fait pivoter la boîte comme une porte sur une charnière placée dans le coin.
Retournement de carte en 3D
Survolez ou donnez le focus pour retourner (CSS uniquement)
La perspective sur le conteneur donne la profondeur, preserve-3d garde les deux faces dans un même espace 3D et backface-visibility masque la face tournée vers l'arrière. Les utilisateurs qui demandent moins d'animations obtiennent un échange instantané.
Combiner transformations et transitions
Effet de soulèvement au survol pour les cartes et les boutons
Seuls transform et box-shadow changent, et le mouvement est désactivé pour les visiteurs qui demandent moins d'animations.
La même idée en Tailwind
motion-safe: n'applique le mouvement au survol que si le visiteur n'a pas demandé la réduction des animations.
Ce qui coûte peu à animer
Travail de rendu déclenché quand une propriété change (comportement habituel des navigateurs)
Propriété
Mise en page
Peinture
Composition seule
transform, translate, rotate, scale
Non
Non (en général)
Oui
Non
Non (en général)
Oui
background-color, color, box-shadow
Non
Oui
Non
width, height, top, left, margin
Oui
Oui
Non
(aucune transformation)
Bac à sable des transformations
Style de sortie
raccourci transform
propriétés individuelles
Réinitialiser
Carte
Contour en pointillés : la place de la carte dans la mise en page. Point foncé : le transform-origin.