Propriété CSS transform-style - Syntaxe, valeurs, exemples

La propriété CSS transform-style contrôle si les enfants d'un élément transformé sont maintenus dans le même espace de rendu 3D que leur parent, ou aplatis dans le plan du parent. C'est ce qui transforme un empilement de boîtes transformées imbriquées en une véritable scène 3D plutôt qu'une image plate.

Cette propriété fait partie des propriétés CSS3, et elle n'a un effet visible que sur les éléments qui sont eux-mêmes transformés avec la propriété transform.

Ce que signifie « contexte de rendu 3D »

Lorsque vous faites pivoter un élément en 3D (par exemple transform: rotateY(50deg)), le navigateur doit décider si les descendants de cet élément font partie du même monde 3D ou sont simplement peints sur la surface du parent comme un autocollant.

flat (la valeur par défaut) aplatit chaque enfant dans le plan 2D du parent. L'enfant peut toujours être transformé, mais il vit dans son propre espace aplati — il ne peut pas se projeter « devant » ou « derrière » son parent en 3D.
preserve-3d maintient les enfants dans le système de coordonnées 3D du parent, de sorte que leurs valeurs rotateX/rotateY/translateZ sont interprétées par rapport au même point de fuite. C'est ce qui vous permet de créer des cubes, des retournements de cartes et des scènes 3D en couches.

transform-style fonctionne de pair avec perspective : définissez perspective sur l'ancêtre pour déterminer l'intensité de l'effet 3D, et transform-style: preserve-3d sur le parent pour que ses enfants vivent réellement dans cet espace 3D.

Info

preserve-3d est remplacé par plusieurs autres propriétés : l'application de overflow (autre que visible), clip-path, filter, opacity inférieure à 1, ou mask sur le même élément force un regroupement qui aplatit les enfants. Si votre scène 3D semble soudainement plate, vérifiez la présence de l'une de ces propriétés sur l'élément preserve-3d.

Info

Pour une compatibilité maximale avec les navigateurs, le préfixe -webkit- (Safari, anciens Chrome et Opera) peut être utilisé en complément de la propriété sans préfixe. Les navigateurs modernes prennent en charge transform-style sans préfixe.

Valeur initiale	flat
S'applique à	Éléments transformables.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.transformStyle = "flat";

Syntaxe

Valeurs CSS de transform-style

transform-style: flat | preserve-3d | initial | inherit;

Exemple de la propriété transform-style :

Exemple de code CSS pour transform-style

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #element {
        position: relative;
        height: 250px;
        width: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      #element1 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #8ebf42;
        -webkit-transform: rotateY(50deg);
        -webkit-transform-style: preserve-3d;
        transform: rotateY(50deg);
        transform-style: preserve-3d;
      }
      #element2 {
        padding: 50px;
        position: absolute;
        border: 2px solid #000000;
        background-color: #1c87c9;
        -webkit-transform: rotateY(-100deg);
        transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div id="element">
      <div id="element1">
        Green
        <div id="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété transform-style avec la valeur « flat » :

Exemple de la propriété CSS transform-style avec la valeur flat

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        position: relative;
        height: 250px;
        margin: 50px;
        padding: 10px;
        border: 2px solid #cccccc;
        background-color: #eeeeee;
      }
      .element1 {
        margin: 20px;
        border: 1px dotted;
        height: 150px;
        width: 150px;
        background-color: green;
        transform: rotateX(15deg);
        transform-style: flat;
      }
      .element2 {
        margin: 20px;
        border: 1px dotted;
        height: 200px;
        width: 200px;
        background-color: lightgreen;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform-style property example</h2>
    <div class="element">
      <div class="element1">
        Green
        <div class="element2">Blue</div>
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
flat	Indique que les enfants de l'élément ne seront pas positionnés dans l'espace tridimensionnel. Il s'agit de la valeur par défaut de cette propriété.
preserve-3d	Indique que les enfants de l'élément seront positionnés dans l'espace tridimensionnel.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Quand l'utiliser

Utilisez transform-style: preserve-3d chaque fois que vous imbriquez des transformations 3D et souhaitez que les éléments intérieurs partagent une même perspective :

Retournement de carte — une carte avec une face avant et une face arrière : le conteneur reçoit preserve-3d, et la face arrière est pivotée avec rotateY(180deg) pour se placer derrière la face avant.
Cube 3D / carrousel — six faces chacune décalées avec translateZ et pivotées depuis un centre commun.
Scènes parallaxe en couches — enfants poussés vers l'avant et l'arrière avec translateZ sous une perspective partagée.

Conservez la valeur par défaut flat lorsque vous n'appliquez qu'une seule transformation à effet 2D (mise à l'échelle, rotation dans le plan, inclinaison) et que vous n'avez pas besoin de profondeur — c'est moins coûteux en rendu et évite les surprises dues aux règles d'aplatissement mentionnées ci-dessus.

Propriétés connexes à associer à transform-style :

perspective — définit l'intensité de l'effet 3D.
perspective-origin — déplace le point de fuite.
transform-origin — modifie le pivot de chaque transformation.
backface-visibility — masque le côté inversé d'un élément pivoté (indispensable pour les retournements de cartes).

Pratique

La propriété transform-style ne fonctionne qu'avec la propriété

transition.animation-name.transform.