transform-box - Propriété CSS
Résumé des caractéristiques de la propriété transform-box
view-box | content-box | border-box | fill-box | stroke-boxview-boxtransform-box passe d'une valeur à l'autre sans transition.Schéma syntaxique de transform-box.
transform-boxDescription des valeurs et exemples
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.
Syntaxes 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;
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: 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; transform-box:inherit; transform-box:revert; transform-box:revert-layer; transform-box:unset;La valeur initiale est :
view-box
Animation de la propriété 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.
Simulateur pour 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.
Prise en charge de transform-box par les navigateurs (compatibilité).
transform-box.
transform-boxNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que transform-box.
Les spécifications CSS éditées par le W3C sont organisées en modules. transform-box fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.