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	Edge Mobile	Firefox pour Android	Opera pour Android	Safari sur iOS	Samsung Internet
Support simple Expérimentale	Chrome Support complet 12 Préfixée 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 Oui Préfixée Support complet Oui Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	WebView Android Support complet 3 Préfixée Support complet 3 Préfixée Préfixée Nécessite l'utilisation d'un préfixe : -webkit-	Chrome Android ?	Edge Mobile Support complet Oui Support complet Oui Support complet Oui 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 Oui Préfixée Support complet Oui 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