transform-box: fill-box — la propriété CSS qui manquait

Le problème

Quand tu animes un élément SVG avec CSS (transform-origin, rotate, etc.), le point de référence par défaut est le coin supérieur gauche du viewport SVG entier — pas de l'élément lui-même. Résultat : les animations partent dans tous les sens.

/* ❌ Tourne autour du coin du SVG, pas de l'élément */
.mon-bras {
  transform-origin: 50% 50%;
  animation: rotate 1s infinite;
}

La solution : transform-box: fill-box

/* ✅ Tourne autour du centre de l'élément lui-même */
.mon-bras {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotate 1s infinite;
}

transform-box: fill-box change le système de référence : transform-origin est maintenant relatif à la bounding box de l'élément, pas du SVG parent.

Exemples de transform-origin utiles

/* Rotation depuis le centre */
transform-origin: 50% 50%;

/* Rotation depuis l'épaule (haut-gauche de l'élément) */
transform-origin: 0% 0%;

/* Rotation depuis le bas (articulation de la jambe) */
transform-origin: 50% 100%;

Animation d'un bras SVG

<svg viewBox="0 0 100 100">
  <!-- Corps -->
  <rect x="40" y="30" width="20" height="40" fill="white" />

  <!-- Bras — anime depuis l'épaule (0% 0%) -->
  <rect class="bras" x="20" y="32" width="20" height="6" rx="3" fill="white" />
</svg>

@keyframes arm-swing {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-40deg); }
  60%  { transform: rotate(-20deg); }
  100% { transform: rotate(0deg); }
}

.bras {
  transform-box: fill-box;
  transform-origin: 100% 50%;  /* pivot à droite = épaule */
  animation: arm-swing 2s ease-in-out infinite;
}

Support navigateurs

Supporté par tous les navigateurs modernes depuis 2020. Safe en production.

Quand l'utiliser

Animations de personnages SVG
Icônes animées (spinner custom, loader, toggle)
Infographies interactives
Toute situation où tu veux rotate ou scale depuis un point logique de l'élément

transform-box: fill-box — animations SVG sans calculs