CSS transform-style Eigenschaft
Wie man die CSS-Eigenschaft transform-style nutzt, um Kindelemente im 3D-Raum zu positionieren. Funktionen und Beispiele.
Die CSS-Eigenschaft transform-style steuert, ob die Kinder eines transformierten Elements im selben 3D-Renderraum wie ihr Elternelement gehalten werden oder in die Ebene des Elternelements abgeflacht werden. Sie verwandelt einen Stapel verschachtelter transform-Boxen in eine echte 3D-Szene statt in ein flaches Bild.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften und hat nur dann einen sichtbaren Effekt auf Elemente, die selbst mit der Eigenschaft transform transformiert werden.
Was „3D-Renderkontext" bedeutet
Wenn man ein Element in 3D dreht (z. B. transform: rotateY(50deg)), muss der Browser entscheiden, ob die Nachkommen dieses Elements Teil derselben 3D-Welt sind oder lediglich wie ein Aufkleber auf der Oberfläche des Elternelements aufgemalt werden.
flat(der Standardwert) flacht jedes Kind auf die 2D-Ebene des Elternelements ab. Das Kind kann weiterhin transformiert werden, lebt jedoch in einem eigenen abgeflachten Raum – es kann in 3D nicht „vor" oder „hinter" seinem Elternelement erscheinen.preserve-3dbehält die Kinder im 3D-Koordinatensystem des Elternelements, sodass ihrerotateX/rotateY/translateZ-Werte relativ zum selben Fluchtpunkt interpretiert werden. Dies ermöglicht den Bau von Würfeln, Karten-Flip-Animationen und geschichteten 3D-Szenen.
transform-style arbeitet Hand in Hand mit perspective: Setze perspective auf dem Vorfahrelement, um die Stärke des 3D-Effekts festzulegen, und transform-style: preserve-3d auf dem Elternelement, damit seine Kinder tatsächlich in diesem 3D-Raum leben.
preserve-3d wird von mehreren anderen Eigenschaften überschrieben: Wird overflow (außer visible), clip-path, filter, opacity unter 1 oder mask auf dasselbe Element angewendet, erzwingt dies eine Gruppierung, die die Kinder abflacht. Wenn eine 3D-Szene plötzlich flach wirkt, sollte man das preserve-3d-Element auf eine dieser Eigenschaften prüfen.
Für maximale Browserkompatibilität kann das Präfix -webkit- (Safari, älteres Chrome und Opera) zusammen mit der präfixlosen Eigenschaft verwendet werden. Moderne Browser unterstützen transform-style ohne Präfix.
| Anfangswert | flat |
|---|---|
| Gilt für | Transformierbare Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM Syntax | object.style.transformStyle = "flat"; |
Syntax
CSS transform-style Werte
transform-style: flat | preserve-3d | initial | inherit;Beispiel der transform-style Eigenschaft:
CSS transform-style Code-Beispiel
<!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>Ergebnis
Beispiel der transform-style Eigenschaft mit dem Wert „flat":
Beispiel der CSS transform-style Eigenschaft mit dem Wert 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>Werte
| Wert | Beschreibung |
|---|---|
| flat | Legt fest, dass die Kinder des Elements nicht dreidimensional positioniert werden. Dies ist der Standardwert dieser Eigenschaft. |
| preserve-3d | Legt fest, dass die Kinder des Elements dreidimensional positioniert werden. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt diese Eigenschaft vom Elternelement. |
Wann es verwendet werden sollte
transform-style: preserve-3d sollte immer dann eingesetzt werden, wenn 3D-Transformationen verschachtelt werden und die inneren Elemente eine gemeinsame Perspektive teilen sollen:
- Karten-Flip — eine Karte mit Vorder- und Rückseite: Der Container erhält
preserve-3d, und die Rückseite wird mitrotateY(180deg)gedreht, sodass sie hinter der Vorderseite liegt. - 3D-Würfel / Karussell — sechs Flächen, die jeweils mit
translateZverschoben und von einem gemeinsamen Mittelpunkt aus gedreht werden. - Geschichtete Parallax-Szenen — Kinder, die mit
translateZunter einer gemeinsamenperspectivenach vorne und hinten verschoben werden.
Der Standardwert flat sollte beibehalten werden, wenn nur eine einzelne 2D-artige Transformation (Skalierung, ebene Drehung, Schrägstellung) angewendet wird und keine Tiefenwirkung benötigt wird — er ist kostengünstiger zu rendern und vermeidet unerwartete Effekte durch die oben genannten Abflachungsregeln.
Verwandte Eigenschaften, die gut mit transform-style kombiniert werden können:
- perspective — legt die Stärke des 3D-Effekts fest.
- perspective-origin — verschiebt den Fluchtpunkt.
- transform-origin — ändert den Drehpunkt jeder Transformation.
- backface-visibility — blendet die Rückseite eines gedrehten Elements aus (unverzichtbar für Karten-Flips).