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 Kinder eines Elements im 3D-Raum positioniert 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: #000;
  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: 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.

Die Spezifikation listet einige Gruppierungswertungen auf, die den Benutzeragenten erfordern, eine abgeflachte Darstellung der Nachkommenelemente zu erstellen, bevor sie angewendet werden können, und daher erzwingen, dass das Element einen benutzten Wert von transform-style: flat hat, selbst wenn preserve-3d angegeben ist. Diese Werte umfassen:

overflow: jeden Wert außer visible oder clip.
opacity: jeden Wert kleiner als 1.
filter: jeden Wert außer none.
clip: jeden Wert außer auto.
clip-path: jeden Wert außer none.
isolation: benutzter Wert von isolate.
mask-image: jeden Wert außer none.
mask-border-source: jeden Wert außer none.
mix-blend-mode: jeden Wert außer normal.
contain: paint und jede andere Eigenschaft/Wert-Kombination, die eine Mal-Containment verursacht. Dies beinhaltet jede Eigenschaft, die den benutzten 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 Transformationsstils

In diesem Beispiel haben wir einen 3D-Würfel erstellt, der Transformationen verwendet. Der übergeordnete Container der Würfelseiten hat standardmäßig transform-style: preserve-3d gesetzt, daher wird es im 3D-Raum transformiert und Sie können es wie beabsichtigt sehen.

Wir bieten auch ein Kontrollkästchen an, mit dem Sie zwischen diesem und transform-style: flat umschalten können. In diesem alternativen Zustand werden die Würfelseiten alle auf die Ebene ihrer Eltern abgeflacht, und möglicherweise können Sie sie je nach verwendetem Browser überhaupt nicht sehen.

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: #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

Siehe auch

Verwendung von CSS-Transformationen