transform-box
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
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
viewBox
est 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'attributviewBox
et 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
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
BCD tables only load in the browser