transform-box

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS transform-box définit la boîte de mise en page à laquelle les propriétés transform, les propriétés de transformation individuelles translate, scale et rotate, ainsi que la propriété transform-origin se rapportent.

Syntaxe

css

/* Valeurs avec un mot-clé */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/* Valeurs globales */
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;

La propriété transform-box est définie grâce à l'un des mots-clés suivants.

Valeurs

content-box: La boîte de contenu est utilisée comme boîte de référence. La boîte de référence d'un <table> est la boîte de bordure de sa boîte englobante de tableau, et non sa boîte de tableau.
border-box: La boîte de bordure est utilisée comme boîte de référence. La boîte de référence d'un <table> est la boîte de bordure de sa boîte englobante de tableau, et non sa boîte de tableau.
fill-box: La boîte englobante de l'objet est utilisée comme boîte de référence. Pour les éléments avec une boîte de mise en page CSS associée, agit comme content-box.
stroke-box: La boîte englobante du trait est utilisée comme boîte de référence. Pour les éléments avec une boîte de mise en page CSS associée, agit comme border-box.
view-box: La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut viewBox est défini pour l'élément créant la zone d'affichage SVG, la boîte de référence est positionnée à l'origine du système de coordonnées établi par l'attribut viewBox, et les dimensions de la boîte de référence sont définies par les valeurs de largeur et de hauteur de l'attribut viewBox. Pour les éléments avec une boîte de mise en page CSS associée, agit comme border-box.

Définition formelle

Valeur initiale	`view-box`
Applicabilité	éléments transformables
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

transform-box = 
  content-box  |
  border-box   |
  fill-box     |
  stroke-box   |
  view-box

Exemple

Portée de `transform-origin` SVG

Dans cet exemple, nous avons un SVG :

html

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
      id="box"
      x="10"
      y="10"
      width="10"
      height="10"
      rx="1"
      ry="1"
      stroke="black"
      fill="none" />
  </g>
</svg>

Dans le CSS, nous avons une animation qui utilise une transformation pour faire tourner le rectangle à l'infini. transform-box: fill-box est utilisé pour que le transform-origin soit le centre de la boîte englobante, de sorte que le rectangle tourne sur place. Sans cela, l'origine de la transformation est le centre de la zone d'affichage SVG, ce qui donne un effet très différent.

css

svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  inset: 0;
}

#box {
  transform-origin: 50% 50%; /* pointez autre chose que `0 0` pour voir l'effet */
  transform-box: fill-box;
  animation: rotate-box 3s linear infinite;
}

@keyframes rotate-box {
  to {
    transform: rotate(360deg);
  }
}

Spécifications

Spécification
CSS Transforms Module Level 1 # transform-box

Compatibilité des navigateurs

Voir aussi

Utiliser les transformations CSS
Les propriétés transform, transform-origin
Propriétés de transformation individuelles :

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 3 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu