transform-style

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-style définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.

S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.

Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).

Syntaxe

/* Avec un mot-clé */
transform-style: preserve-3d;
transform-style: flat;

/* Valeurs globales */
transform-style: inherit;
transform-style: initial;
transform-style: unset;

Valeurs

flat: Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.
preserve-3d: Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.

Syntaxe formelle

flat | preserve-3d

Spécifications

Spécification	État	Commentaires
CSS Transforms Level 2 La définition de 'transform-style' dans cette spécification.	Brouillon de l'éditeur	Définition initiale.

Valeur initiale	`flat`
Applicabilité	éléments transformables
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle
Crée un contexte d'empilement	oui

Compatibilité des navigateurs

Update compatibility data on GitHub

	Ordinateur						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Webview Android	Chrome pour Android	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
`transform-style` Expérimentale	Chrome Support complet 36 Support complet 36 Support complet 12 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Edge Support complet 12 Support complet 12 Support complet 12 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Support complet 16 Support complet 16 Support complet 10 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Aucun support Non	Opera Support complet 15 Préfixée Support complet 15 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari Support complet 9 Support complet 9 Support complet 4 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 37 Support complet 37 Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android Support complet 36 Support complet 36 Support complet 18 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Firefox Android Support complet 16 Support complet 16 Support complet 10 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -moz- Support complet 49 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Support complet 44 Préfixée Désactivée Préfixée Nécessite l'utilisation d'un préfixe : -webkit- Désactivée From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Support complet Oui Préfixée Support complet Oui Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Safari iOS Support complet 9 Support complet 9 Support complet 2 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Samsung Internet Android ?

Légende

Support complet: Support complet
Aucun support: Aucun support
Compatibilité inconnue: Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.: Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.: Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.: Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Utiliser les transformations CSS