Transform-box - Propriété CSS

Schéma de la syntaxe de transform-box.

Schéma syntaxique de la propriété transform-box.
Télécharger le schéma en SVG.

Description de la propriété transform-box.

La propriété transform-box définit quelle est la boîte de référence pour les transformations, le point précis de référence (le point fixe) étant défini par transform-origin.

Exemple : une rotation a été appliquée à l'élément ci-dessous; dans le premier cas, la boîte de référence est la bordure (border-box), dans le deuxième cas c'est le contenu (content-box). Le point fixe, celui qui ne subit aucune transformation, est légèrement décalé, et le résultat sensiblement différent.

transform-box:border-box;
transform-origin:0 0;
transform:rotate(20deg);

transform-box:content-box;
transform-origin:0 0;
transform:rotate(20deg);

Reportez-vous à la propriété transform pour une présentation plus générale des transformations, et également à la propriété transform-origin.

Valeurs pour transform-box.

• transform-box: content-box;

  Cette valeur définit la boîte de référence au contenu, en excluant donc les marges intérieures (padding), et l'épaisseur de la bordure.

  Marges (margin)

  Bordure (border)

  Marges intérieures (padding)

  Contenu (content)
  transform-box:content-box;
transform-origin:0 0;
• transform-box: border-box;

  Cette valeur définit la boîte de référence à la bordure de l'élément, en incluant les marges intérieures, l'épaisseur de la bordure, mais en excluant les marges extérieures.

  Marges (margin)

  Bordure (border)

  Marges intérieures (padding)

  Contenu (content)
  transform-box:border-box;
transform-origin:0 0;
• transform-box: view-box; transform-box: fill-box; transform-box: stroke-box;

  Ces valeurs sont plutôt adaptées aux éléments SVG. En HTML on a les équivalences suivantes :
  view-box ⇔ border-box
fill-box ⇔ content-box
stroke-box ⇔ border-box.

• transform-box: initial; (view-box) transform-box: inherit; transform-box: revert; transform-box: revertLayer; transform-box: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de transform-box.

La seule animation de transform-box ne donne pas des effets très spectaculaires. Pour la démonstration ci-dessous, l'élément bleu a été soumis à deux animations :

• Une première, rapide, sur transform-box.
• Une deuxième, plus lente sur transform.

Accéder à la propriété transform-box par programme.

Avec Javascript, modifier la valeur de transform-box.

En Javascript, voici comment modifier la boîte de référence pour les transformations. Javascript propose une syntaxe avec la notation typique de CSS, le nom de la propriété écrit en kebab-case et une autre syntaxe avec le nom de la propriété écrit en camel-case, plus commune en Javascript.

let el = document.getElementById('id'); el.style['transform-box'] = 'border-box'; // ou let el = document.getElementById('id'); el.style.transformBox = 'border-box';

Avec Javascript, lire la valeur de transform-box.

Ce code fonctionne lorsque la propriété a été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['transform-box']; // ou let el = document.getElementById('id'); let value = el.style.transformBox;

Avec Javascript, lire la valeur calculée de transform-box.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. A défaut, la valeur calculée vaut la valeur initiale de la propriété (view-box dans le cas de transform-box). La valeur calculée est toujours disponible.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transform-box');

Avec JQuery, modifier la valeur de transform-box.

JQuery propose également une solution pour écrire ou lire la valeur de transform-box, et avec une syntaxe plus courte que celle de Javascript.


$('#id').css('transform-box', 'border-box');
// ou
$('#id').css('transformBox', 'border-box');


Avec JQuery, lire la valeur calculée de transform-box.

let value = $('#id').css('transform-box');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS. Ce sont tous des codes qui interagissent avec CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété transform-box et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de transform-box. Cependant, dans le cas de transform-box il n'y aura pas de différence entre ces deux valeurs car la propriété n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété transform-box.

La bordure de l'élément tournant est exagérément épaisse, afin de bien montrer l'effet de la propriété transform-box. Par ailleurs la valeur de transform-origin a été fixée à 0px 0px, ce qui correspond au coin en haut à gauche de l'élément. C'est à dire le point rouge lorsque on prend comme référence border-box, ou le point vert si la référence est fill-box.

Compatibilité des navigateurs avec transform-box.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Propriété
transform-box

Estimation de la prise en charge globale.

97%

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété transform-box.

• Module CSS - Transformations - Niveau 1

  Ce module de spécification définit les transformations en 2D (dans le plan de l'écran) qu'il est possible d'appliquer aux éléments avec la propriété transform.
  Il définit également les fonctions relatives aux transformations (translation, rotation, écrasement, et effet de zoom).

  Concernant transform-box. Introduction des transformations en 2D via CSS.
  Première définition de la propriété transform-box.
  

  28 Février 2012

  Document de travail.

  

  14 Février 2019

  Candidat à la recommandation.

  

  

• Module CSS - Transformations - Niveau 2

  En plus des transformations 2D déjà présentées dans le niveau 1 de la spécification, ce module traite des transformations en 3D. Il introduit de nouvelles propriétés pour gérer la hauteur du point de vue et la restitution des effets 3D.
  Ce module introduit également les propriétés individuelles de rotation, translation et effet de zoom.

  Concernant transform-box. Ce niveau de la spécification introduit les transformations en 3D.
  Pas de changement concernant directement la propriété transform-box.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, au sujet des transformations.

Le module "Module CSS - Transformations" (ou Module CSS - Transformations en anglais) décrit la propriété transform-box, et regroupe également toutes les définitions concernant les transformations en CSS :

Propriétés :

Fonctions :