Générateur de transform CSS (rotation, déplacement, échelle, inclinaison et 3D)
Manipulez les curseurs et regardez la carte changer. L’ordre des fonctions dans le code est celui dans lequel le navigateur les applique.
Mode d’emploiPivoter, déplacer et incliner sans retenir la syntaxe
Disponible en: 
Générateur de transform CSS (rotation, déplacement, échelle, inclinaison et 3D): à quoi ça sert
La propriété transform déplace, fait pivoter, met à l’échelle et incline des éléments sans toucher à la mise en page, et c’est la façon la plus légère d’animer. Manipulez les curseurs de déplacement, rotation, échelle, inclinaison et rotation 3D, choisissez le point d’origine et la perspective, et voyez la carte changer aussitôt.
Le code sort dans l’ordre où le navigateur applique les fonctions et, avec l’option de survol, inclut une transition douce limitée aux utilisateurs de souris et désactivée pour les personnes qui ont demandé moins de mouvement. La page explique pourquoi l’ordre compte et pourquoi animer transform est plus léger qu’animer top, left ou width.
Mode d’emploi
- Manipulez les curseurs.
- Choisissez l’origine et, en 3D, la perspective.
- Copiez le CSS.
Quand l’utiliser
- Effets de survol sur des cartes.
- Icônes pivotées et en miroir.
- Cartes qui se retournent en 3D.
Questions fréquentes
L’ordre des fonctions dans transform a-t-il de l’importance ?
Oui. translateX(100px) rotate(45deg) déplace puis fait pivoter sur place ; rotate(45deg) translateX(100px) pivote d’abord, puis avance dans la direction déjà pivotée et finit à un autre endroit. Le générateur utilise l’ordre déplacer, pivoter, mettre à l’échelle et incliner, le plus prévisible.
Pourquoi utiliser transform pour les animations ?
Transform et opacity sont les propriétés les moins coûteuses à animer : elles ne forcent pas le navigateur à recalculer la mise en page et s’exécutent généralement sur la carte graphique. Animer top, left, width ou margin à la place rend l’animation saccadée sur les téléphones modestes.
À quoi sert la perspective ?
Dans les rotations 3D (rotateX et rotateY), la perspective définit la distance de l’observateur : de petites valeurs, comme 300px, donnent un effet 3D marqué et déformé ; de grandes valeurs, comme 1500px, rendent la rotation plus douce.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.