CSS transform-style-Eigenschaft

Die transform-style-Eigenschaft legt fest, wie die Kindelemente im dreidimensionalen (3D-)Raum gerendert werden.

Diese Eigenschaft ist eine der CSS3-Eigenschaften.

Sie funktioniert nur in Verbindung mit der transform-Eigenschaft.

Die transform-style-Eigenschaft hat zwei Werte: flat und preserve-3d. Wenn der Wert „flat“ festgelegt ist, existieren die Kindelemente des Elements nicht eigenständig im 3D-Raum.

INFO

Für maximale Browserkompatibilität wird bei dieser Eigenschaft eine Erweiterung wie -webkit- für Safari, Google Chrome und Opera (neuere Versionen) verwendet.

Anfangswert	flat
Gilt für	Transformierbare Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.transformStyle = "flat";

Syntax

CSS transform-style-Werte

css

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

Beispiel für die transform-style-Eigenschaft:

CSS transform-style-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS transform-style property

Beispiel für die transform-style-Eigenschaft mit dem Wert „flat“:

Beispiel für die CSS transform-style-Eigenschaft mit dem Wert flat

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung
flat	Legt fest, dass die Kindelemente des Elements nicht im dreidimensionalen Raum positioniert werden. Dies ist der Standardwert dieser Eigenschaft.
preserve-3d	Legt fest, dass die Kindelemente des Elements im dreidimensionalen Raum positioniert werden.
initial	Legt diese Eigenschaft auf ihren Standardwert fest.
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.

Praxis

Die transform-style-Eigenschaft funktioniert nur mit der

transition-Eigenschaft.animation-name-Eigenschaft.transform-Eigenschaft.

CSS transform-style-Eigenschaft ​

Syntax ​

Beispiel für die transform-style-Eigenschaft: ​

Ergebnis ​

Beispiel für die transform-style-Eigenschaft mit dem Wert „flat“: ​

Werte ​