Générateur de Transform CSS

Contrôles

Aperçu & CSS

 
   
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Pivoter — Faites glisser le curseur de rotation ou saisissez une valeur en degrés pour faire tourner l'élément autour de son origine.
    2.  
  2. Redimensionner — Ajustez l'échelle X et Y indépendamment pour étirer, réduire ou refléter l'élément.
    3.  
  3. Translater — Déplacez l'élément horizontalement et verticalement sans affecter le flux du document.
    4.  
  4. Copiez le CSS — Cliquez sur « Copier le CSS » pour obtenir la déclaration transform prête à l'emploi.
    5.  
 
 
 
Qu'est-ce que CSS transform ?
 
CSS transform permet de pivoter, redimensionner, incliner et translater des éléments en espace 2D ou 3D. Contrairement au positionnement, les transformations n'affectent pas la mise en page des éléments voisins.
 
Les transformations sont composées par le GPU, ce qui les rend idéales pour les animations et transitions. Combiner plusieurs fonctions dans une seule propriété transform les applique de droite à gauche.
 
 
 
Cas d'usage courants
 
 
Animations de survol de boutons
 
Effets de retournement de cartes
 
Icônes en rotation
 
Séparateurs de sections diagonaux
 
Zoom au survol d'images
 
Positionnement d'infobulles
 
Décalages de couches parallaxe
 
Éléments reflétés/retournés
 
 
Conseils & bonnes pratiques
 
 
 Définissez transform-origin 
Par défaut, les transformations partent du centre de l'élément. Utilisez transform-origin pour pivoter autour d'un coin ou d'un point personnalisé.
 
 
 Préférez transform au positionnement 
Animer transform est bien moins coûteux qu'animer top/left. Cela évite le recalcul de mise en page et reste sur le thread de composition.
 
 
 L'ordre compte 
rotate(45deg) scale(2) produit un résultat différent de scale(2) rotate(45deg). La fonction la plus à droite s'applique en premier.
 
 
 Transformations 3D 
Ajoutez perspective au parent et utilisez rotateX / rotateY pour des retournements de cartes 3D et effets de cube réalistes.
 
 
 
Questions fréquentes
 
 
transform affecte-t-il la mise en page ?
 
Non. Les éléments transformés occupent leur espace original dans le flux du document. Les autres éléments ne se réagencent pas lorsque vous appliquez une transformation.
 
 
 
Puis-je animer les transformations CSS ?
 
Oui. Utilisez transition: transform 0.3s ease; pour les effets de survol, ou @keyframes pour des animations en boucle. Les transformations comptent parmi les propriétés CSS les plus performantes à animer.
 
 
 
Quelle différence entre translate et position ?
 
translate déplace un élément visuellement sans affecter la mise en page. position: relative avec top/left le déplace aussi visuellement, mais peut déclencher des recalculs de mise en page pendant l'animation.
 
 
 
Comment retourner un élément horizontalement ?
 
Utilisez transform: scaleX(-1); pour un miroir horizontal, ou scaleY(-1) pour un retournement vertical.