w3docs logo

Propriété CSS transform-style

La propriété transform-style spécifie comment les éléments enfants sont rendus dans un espace tridimensionnel (3D).

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

Cette propriété a deux valeurs: flat et preserve-3d. Si la valeur "flat" est définie, les enfants de l'élément n'existeront dans leur propre espace tridimensionnel.

Pour la compatibilité maximale des navigateurs, les extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions) sont utilisées avec cette propriété.
Valeur initiale flat
Appliquée à Éléments transformables.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.transformStyle = "flat";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #element {
      position: relative;
      height: 250px;
      width: 250px;
      margin: 50px;
      padding: 10px;
      border: 2px solid #666;
      background-color: #eee;
      }
      #element1 {
      padding: 50px;
      position: absolute;
      border: 2px solid #000;
      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 #000;
      background-color: #1c87c9;
      -webkit-transform: rotateY(-100deg);
      transform: rotateY(-100deg);
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transform-style</h2>
    <div id="element">
      <div id="element1">
        Vert
        <div id="element2">Bleu</div>
      </div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
flat Définit que les enfants des éléments ne seront pas positionnés dans l'espace tridimensionnelle. C'est la valeur initiale de cette propriété.
preserve-3d Définit que les enfants des éléments seront positionnés dans l'espace tridimensionnelle.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
36.0+
12.0-35.0 -webkit-
16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-
Trouvez-vous cela utile?