transform-style CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Die transform-style CSS Eigenschaft legt fest, ob die Kinder eines Elements im 3D-Raum positioniert sind oder in die Ebene des Elements abgeflacht werden.
Probieren Sie es aus
transform-style: flat;
transform-style: preserve-3d;
<section class="default-example" id="default-example">
<div class="transition-all layer" id="example-element">
<p>Parent</p>
<div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
</div>
</section>
.layer {
background: #623e3f;
border-radius: 0.75rem;
color: white;
transform: perspective(200px) rotateY(30deg);
}
.numeral {
background-color: #ffba08;
border-radius: 0.2rem;
color: black;
margin: 1rem;
padding: 0.2rem;
transform: rotate3d(1, 1, 1, 45deg);
}
Wenn abgeflacht, existieren die Kinderelemente nicht eigenständig im 3D-Raum.
Da diese Eigenschaft nicht vererbt wird, muss sie für alle nicht-blattförmigen Nachkommen des Elements gesetzt werden.
Syntax
/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;
Werte
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
flat-
Gibt an, dass die Kinder des Elements in der Ebene des Elements selbst liegen.
preserve-3d-
Gibt an, dass die Kinder des Elements im 3D-Raum positioniert sein sollten.
Beschreibung
Die Spezifikation listet einige Gruppierungseigenschaftswerte auf, die dazu führen, dass der Benutzeragent eine abgeflachte Darstellung der Nachkommenelemente erstellen muss, bevor sie angewendet werden können, und daher das Element einen verwendeten Wert von transform-style: flat haben muss, selbst wenn preserve-3d angegeben ist. Diese Eigenschaftswerte umfassen:
overflow: jeder Wert außervisibleoderclip.opacity: jeder Wert kleiner als1.filter: jeder Wert außernone.clip: jeder Wert außerauto.clip-path: jeder Wert außernone.isolation: verwendeter Wert vonisolate.mask-image: jeder Wert außernone.mask-border-source: jeder Wert außernone.mix-blend-mode: jeder Wert außernormal.contain:paintund jede andere Eigenschaft/Wert-Kombination, die Malrestriktionen verursacht. Dies schließt jede Eigenschaft ein, die den verwendeten Wert dercontainEigenschaft beeinflusst, wiecontent-visibility: hidden.
Formale Definition
| Anfangswert | flat |
|---|---|
| Anwendbar auf | transformierbare Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
| Erstellt Stapelkontext | Ja |
Formale Syntax
transform-style =
flat |
preserve-3d
Beispiele
Demonstration der Transformationsart
In diesem Beispiel haben wir einen 3D-Würfel erstellt, der mithilfe von Transformationen geformt wird. Der übergeordnete Container der Würfelseiten hat standardmäßig transform-style: preserve-3d gesetzt, sodass er im 3D-Raum transformiert wird und Sie ihn wie beabsichtigt sehen können.
Wir bieten auch ein Kontrollkästchen an, mit dem Sie zwischen diesem Zustand und transform-style: flat umschalten können. In diesem alternativen Zustand werden die Würfelseiten alle in die Ebene ihres Elternteils abgeflacht, und Sie können sie möglicherweise überhaupt nicht sehen, je nach verwendetem Browser.
HTML
<section id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
<div class="checkbox">
<label for="preserve"><code>preserve-3d</code></label>
<input type="checkbox" id="preserve" checked />
</div>
CSS
#example-element {
margin: 50px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 30deg);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
JavaScript
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");
checkbox.addEventListener("change", () => {
cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Transforms Module Level 2 # transform-style-property |