Propriété de style de transformation CSS
Exemple
Laissez les éléments enfants transformés conserver les transformations 3D :
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Définition et utilisation
La transform-style
propriété spécifie comment les éléments imbriqués sont rendus dans l'espace 3D.
Remarque : Cette propriété doit être utilisée avec la propriété transform .
Pour mieux comprendre la transform-style
propriété,
visionnez une démo .
Valeur par défaut: | appartement |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.transformStyle="preserve-3d" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Syntaxe CSS
transform-style: flat|preserve-3d|initial|inherit;
Valeurs de propriété
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Pages connexes
Tutoriel CSS : Transformations 2D CSS
Tutoriel CSS : Transformations 3D CSS
Référence HTML DOM : propriété transformStyle