transform-box
Baseline
Widely available
*
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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété transform-box définit la boîte à laquelle les propriétés transform et transform-origin font référence.
/* Avec un mot-clé */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;
/* Valeurs globales */
transform-box: inherit;
transform-box: initial;
transform-box: unset;
Syntaxe
La propriété transform-box est définie grâce à l'un des mots-clés suivants.
Valeurs
border-box-
La boîte de bordure (border) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.
fill-box-
La boîte liée à l'objet est utilisée comme boîte de référence.
view-box-
Le plus proche viewport SVG est utilisé comme boîte de référence. Si l'attribut
viewBoxest défini pour le viewport de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attributviewBoxet les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attributviewBox.
Définition formelle
| Valeur initiale | view-box |
|---|---|
| Applicabilité | éléments transformables |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
transform-box =
content-box |
border-box |
fill-box |
stroke-box |
view-box
Exemple
HTML
<p class="premier">"I saw Mr. Hyde"</p>
<p class="deuxieme">"Quite right, Mr. Utterson"</p>
CSS
p {
transform: rotate(90deg);
transform-origin: bottom left;
transform-box: border-box;
}
.premier {
border: 3px black solid;
}
.deuxieme {
border: 3px black solid;
padding: 3em;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Transforms Module Level 1 # transform-box |
Compatibilité des navigateurs
Chargement…