Transform-style - Propriété CSS

Schéma de la syntaxe de transform-style.

Description de la propriété transform-style.

Définit comment se comportent les enfants de l'élément lorsque ce dernier subit une transformation 3d. Plus précisément transform-style définit si les enfants de l'élément ont leur propre espace 3d ou bien, à l'inverse, s'ils sont toujours dans le même plan que le parent.

Dans l'exemple ci-dessous, l'élément parent est en bleu, et l'élément enfant en vert. Ce dernier a été tourné de 45 degrés autour de l'axe X. Cette rotation l'a fait sortir du plan de son parent. C'est bien visible sur le résultat, parce que la propriété transform-style a été fixée à la valeur preserve-3d.

Plusieurs autres propriétés interfèrent avec transform-style et forcent les enfants à rester dans le plan du parent :

• overflow : avec une valeur différente de visible ou clip.
• opacity : lorsque l'opacité est inférieure à 1 (élément semi-transparent ou transparent).
• filter : dès qu'un filtre graphique est appliqué (flou, changement de la teinte, etc).
• clip : toute valeur différente de auto.
• clip-path : toute valeur différente de none.
• isolation : avec la valeur isolate.
• mask-image : toute valeur différente de none.
• mask-border-source : toute valeur différente de none.
• mix-blend-mode : toute valeur différente de normal.
• contain : avec la valeur paint.

Valeurs pour transform-style.

• transform-style: flat;

  Valeur par défaut. Les éléments enfants n'ont pas d'espace 3D qui leur serait propre : ils ne peuvent que rester dans le même plan que l'élément parent.

• transform-style: preserve-3d;

  Les éléments enfants de l'élément animé ont leur propre espace 3D, ce qui permet des restitutions plus réalistes des effets 3d.

• transform-style: initial; (flat) transform-style: inherit; transform-style: revert; transform-style: revertLayer; transform-style: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de transform-style.

L'exemple ci-dessous est composé d'un élément bleu (le parent), contenant un élément vert (qui est donc son enfant). Le parent a été tourné autour de l'axe X de 60 degrés, tandis que l'élément enfant a été monté (axe Z) de 30 pixels.

L'animation est faite sur la propriété transform-style.Quand cette dernière passe par la valeur flat, le décalage de l'élément vert n'apparaît plus : l'élément enfant reste confiné dans le plan de son parent.

Le simulateur ci-dessous présente deux constructions, composées chacune d'un élément parent (bleu) contenant un élément enfant (en vert). En mode flat, il est impossible de voir les transformations qui ont été appliquées à l'élément enfant, car ce dernier reste dans le plan du parent et tourne avec lui. Dans le premier exemple, l'élément enfant est même invisible car il a été tourné de 90° autour de l'axe vertical (Y).
En mode preserve-3d on se rend compte des transformations qui ont été appliquées à chacun des éléments enfants.

Compatibilité des navigateurs avec transform-style.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Propriété
transform-style

Estimation de la prise en charge globale.

97%

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété transform-style.

• Module CSS - Transformations - Niveau 2

  Ce niveau de la spécification introduit les transformations en 3D.
  Ajout de la propriété transform-style.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou CSS Transforms Module en anglais) décrit la propriété transform-style, et regroupe également toutes les définitions concernant les transformations en CSS :

Propriétés :

Fonctions :