6XC

Générateur de transform CSS

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

1 300 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.

Commentaires

Pas encore de commentaires — soyez le premier à en écrire un !

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