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 der 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 Kinder des Elements nicht eigenständig im 3D-Raum.
Da diese Eigenschaft nicht vererbt wird, muss sie für alle nicht-Blatt-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
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 werden sollen.
Beschreibung
Die Spezifikation listet einige Gruppierungseigenschaftswerte auf, die den User Agent zwingen, eine abgeflachte Darstellung der Nachkommenelemente zu erstellen, bevor sie angewandt werden können, und daher das Element zwingen, einen benutzten Wert von transform-style: flat zu haben, 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 Eigenschafts-/Wertkombination, die Malbegrenzung verursacht. Dazu gehören alle Eigenschaften, die den verwendeten Wert dercontain-Eigenschaft beeinflussen, 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 des transform-style
In diesem Beispiel haben wir einen 3D-Würfel, der mit Transformationen erstellt wurde. Der Elternelement-Container der Würfelflächen hat standardmäßig transform-style: preserve-3d gesetzt, sodass er im 3D-Raum transformiert wird und Sie ihn wie beabsichtigt sehen können.
Wir stellen auch ein Kontrollkästchen bereit, um zwischen diesem und transform-style: flat zu wechseln. In diesem alternativen Zustand sind die Würfelflächen alle auf 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 |