Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Transform-style - Propriété CSS

transform-style

Résumé des caractéristiques de la propriété transform-style

Description rapide
Rendu des éléments soumis à une transformation 3D.
Statut
Standard
S'applique à
Tous les éléments transformables.
Utilisable sur
HTML
Valeurs prédéfinies
flat | preserve-3d
Pourcentages
Ne s'appliquent pas.
Valeur initiale
flat
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété transform-style passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de transform-style.

transform-style - Syntax DiagramSyntax diagram of the transform-style CSS property. flat flat preserve-3d preserve-3dtransform-style:;transform-style:;
Schéma syntaxique de la propriété transform-style
Les liens du schéma donnent accès à plus de détails

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.

Syntaxes 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.

Valeurs globales
(communes à toutes les propriétés)

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.

Animation de la propriété 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.

Simulateur pour transform-style.

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.

transform-style :

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Restitution correcte par les navigateurs des transformations en 2D (dans le plan de l'écran).
Colonne 2
Restitution correcte des transformations en 3D.
Colonne 2
Traitement correct de la propriété transform-style.
1
Transformations
2D
2
Transformations
3D
3
Propriété
transform-style
Estimation de la prise en charge globale.
98%
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 108

Baidu Browser

Version testée : 13.18

Chrome

Version testée : 109

Chrome pour Androïd

Version testée : 108

Edge

Version testée : 108

Firefox

Version testée : 108

Firefox pour Androïd

Version testée : 107

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 2.5

Opéra

Version testée : 92

Opéra Mobile

Version testée : 72

QQ Browser

Version testée : 13.1

Safari

Version testée : 16.2

Safari sur IOS

Version testée : 16.2

Samsung Internet

Version testée : 19.0

UC Browser pour Androïd

Version testée : 13.4

Opéra mini

Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique de la propriété transform-style.

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 :

backface-visibility
Visibilité de la face arrière de l'élément (pendant sa rotation).
perspective
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation de l'élément.
scale
Définit un mise à l'échelle de l'élément (agrandissement ou réduction).
transform
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
transform-box
Définit la boîte de référence pour les transformations.
transform-origin
Point d'origine pour les transformations.
translate
Définit une translation de l'élément (un déplacement).

Fonctions :

matrix()
Applique une transformation composite à un élément (translations, rotations...)
matrix3d()
Applique une série de transformations 3D à un élément.
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation de l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D de l'élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Applique une translation (un déplacement ) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).