6XC

Générateur de transform CSS

Combinez rotate, scale, translate et skew visuellement et copiez le CSS transform résultant.

967 vues

La propriété transform

transform déplace, fait pivoter, redimensionne et incline un élément sans affecter le flux du document, et elle est accélérée par le GPU — c'est pourquoi transform (avec opacity) est la propriété de choix pour des animations fluides. Les fonctions s'appliquent de droite à gauche, donc leur ordre compte : rotate(45deg) translateX(50px) n'équivaut pas à l'inverse.

Questions fréquentes

Pourquoi l'ordre des fonctions compte-t-il ?

Chaque fonction transforme le système de coordonnées pour la suivante. translate puis rotate déplace d'abord puis tourne sur place ; rotate puis translate tourne d'abord l'axe, donc le déplacement devient diagonal.

transform affecte-t-il les éléments environnants ?

Non — l'élément conserve son espace d'origine dans la mise en page. Cela rend les transformations peu coûteuses à animer, mais oblige à surveiller les chevauchements.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer