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 ⁨September 2015⁩.

Die transform-style CSS Eigenschaft legt fest, ob die Kinder eines Elements im 3D-Raum positioniert oder im Ebenen 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

css

/* 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: Zeigt an, dass die Kinder des Elements in der Ebene des Elements selbst liegen.
preserve-3d: Zeigt an, dass die Kinder des Elements im 3D-Raum positioniert werden sollten.

Die Spezifikation listet einige Gruppierungseigenschaftswerte auf, die den Benutzeragenten erfordern, eine abgeflachte Darstellung der Nachkommenelemente zu erstellen, bevor sie angewendet werden können. Daher wird das Element gezwungen, einen genutzten Wert von transform-style: flat anzunehmen, selbst wenn preserve-3d angegeben ist. Diese Eigenschaftswerte umfassen:

overflow: jeder Wert außer visible oder clip.
opacity: jeder Wert kleiner als 1.
filter: jeder Wert außer none.
clip: jeder Wert außer auto.
clip-path: jeder Wert außer none.
isolation: genutzter Wert von isolate.
mask-image: jeder Wert außer none.
mask-border-source: jeder Wert außer none.
mix-blend-mode: jeder Wert außer normal.
contain: paint und jede andere Eigenschaft/Wert-Kombination, die Malen-Einschränkungen verursacht. Dies schließt jede Eigenschaft ein, die den genutzten Wert der contain Eigenschaft beeinflusst, wie content-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-Stils

In diesem Beispiel haben wir einen 3D-Würfel, der mit 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 beabsichtigt sehen können.

Wir bieten Ihnen auch ein Kontrollkästchen, das es Ihnen ermöglicht, zwischen diesem und transform-style: flat zu wechseln. In diesem alternativen Zustand werden die Würfelflächen alle auf die Ebene ihres übergeordneten Elements abgeflacht und Sie können sie möglicherweise überhaupt nicht sehen, abhängig vom verwendeten Browser.

HTML

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

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

Specification
CSS Transforms Module Level 2 # transform-style-property

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Transformationen

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden