transform-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Die transform-style
- CSS Eigenschaft legt fest, ob die Nachfahren eines Elements im 3D-Raum positioniert werden oder ob sie in der Ebene des Elements abgeflacht werden.
Probieren Sie es aus
Falls abgeflacht, existieren die Nachfahren des Elements nicht eigenständig im 3D-Raum.
Da diese Eigenschaft nicht vererbt wird, muss sie für alle nicht-Blatt-Nachfahren des Elements festgelegt 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 Nachfahren des Elements in der Ebene des Elements selbst liegen.
preserve-3d
-
Gibt an, dass die Nachfahren des Elements im 3D-Raum positioniert werden sollen.
Beschreibung
Die Spezifikation listet einige Gruppierungseigenschaftswerte auf, die den User-Agent zwingen, eine abgeflachte Darstellung der Nachfahrelemente zu erstellen, bevor sie angewendet werden können. Dies führt dazu, dass das Element einen Used Value von transform-style: flat
erhält, auch wenn preserve-3d
angegeben wurde. Zu diesen Eigenschaftswerten gehören:
overflow
: Jeder Wert außervisible
oderclip
.opacity
: Jeder Wert kleiner als1
.filter
: Jeder Wert außernone
.clip
: Jeder Wert außerauto
.clip-path
: Jeder Wert außernone
.isolation
: Used Value vonisolate
.mask-image
: Jeder Wert außernone
.mask-border-source
: Jeder Wert außernone
.mix-blend-mode
: Jeder Wert außernormal
.contain
:paint
und jede andere Eigenschaft/Wert-Kombination, die zu einer Mal-Kontainierung führt. Dies schließt jede Eigenschaft ein, die den Used Value dercontain
-Eigenschaft beeinflusst, wie z. B.content-visibility: hidden
.
Formale Definition
Anfangswert | flat |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Erstellt Stapelkontext | Ja |
Formaler Syntax
transform-style =
flat |
preserve-3d
Beispiele
Demonstration der Transformationsstil-Eigenschaft
In diesem Beispiel haben wir einen 3D-Würfel, der mithilfe von Transformationen erstellt wurde. Der übergeordnete Container der Würfelflächen hat standardmäßig transform-style: preserve-3d
gesetzt, sodass er im 3D-Raum transformiert wird und Sie ihn wie vorgesehen sehen können.
Es gibt auch ein Kontrollkästchen, mit dem Sie zwischen diesem Zustand und transform-style: flat
umschalten können. Im alternativen Zustand werden die Würfelflächen alle auf die Ebene ihres übergeordneten Containers abgeflacht, und möglicherweise können Sie sie ü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: #fff;
}
.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
Specification |
---|
CSS Transforms Module Level 2 # transform-style-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-style |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.