Transform-box - Propriété CSS

transform-box

Résumé des caractéristiques de la propriété transform-box

Description rapide
Définit la boîte de référence pour les transformations.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
view-box | content-box | border-box | fill-box | stroke-box
Pourcentages
Ne s'appliquent pas.
Valeur initiale
view-box
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété transform-box passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de transform-box.

transform-box - Syntax DiagramSyntax diagram of the transform-box CSS property. content-box content-box border-box border-box fill-box fill-box stroke-box stroke-box view-box view-boxtransform-box:;transform-box:;
Schéma syntaxique de la propriété transform-box.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
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.

Rotation avec transform-box:border-box transform-box:border-box;
transform-origin:0 0;
transform:rotate(20deg);
Rotation avec transform-box:content-box 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.

    transform-box: border-box

  • 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.

    transform-box: content-box

  • 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.

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.

transform-box :
HTML

Compatibilité des navigateurs avec transform-box.

Colonne 1
Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.
Colonne 2
Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.
Colonne 3
Prise en charge de la propriété transform-box qui définit quelle est la boite de référence pour les transformations.

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

    Introduction des transformations en 2D via CSS.
    Première définition de la propriété transform-box.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Février 2019
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Transformations - Niveau 2

    Ce niveau de la spécification introduit les transformations en 3D.
    Pas de changement concernant directement la propriété transform-box.
    WD
    03 Mars 2020
    Document de travail.
    CR
    PR
    REC

Voir aussi, au sujet des transformations.

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

Propriétés :

backface-visibility
Visibilité de la face arrière de l'élément (pendant sa rotation).
perspective
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation à appliquer à l'élément.
scale
Définit une mise à l'échelle de l'élément (agrandissement ou réduction).
transform
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
transform-origin
Définit le point d'origine pour les transformations.
transform-style
Définit comment sont rendus les éléments soumis à une transformation 3D.
translate
Applique une translation à un élément (un déplacement linéaire).

Fonctions :

matrix()
Applique une transformation composite à un élément (translations, rotations...).
matrix3d()
Applique une série de transformations 3D à un élément.
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation à appliquer à l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D à appliquer à un élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Définit une translation (un déplacement) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).