Transform Generator

Combinez translate, rotate, scale et skew et visualisez instantanément la transformation appliquée à un élément.

Paramètres

Aperçu

Box

Code


            
            
            

Guide d'utilisation

La propriété transform applique plusieurs transformations dans l'ordre indiqué. L'ordre compte : une rotation avant une translation ne donne pas le même résultat qu'après.

  • transform est performant (GPU) et idéal pour les animations.
  • Associez transition: transform pour des effets fluides.

FAQ

L'ordre des transformations est-il important ?

Oui. transform: rotate() translate() applique d'abord la rotation puis la translation dans le repère pivoté, ce qui diffère de l'ordre inverse.

Transform déplace-t-il les éléments voisins ?

Non, transform ne modifie pas le flux : les éléments voisins ne sont pas repoussés, contrairement à margin.