transform-box

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Die transform-box CSS Eigenschaft definiert die Layout-Box, auf die sich die transform, individuelle Transform-Eigenschaften translate, scale, und rotate, sowie die transform-origin Eigenschaften beziehen.

Syntax

css
/* Keyword values */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;

Die transform-box Eigenschaft wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

content-box

Die Inhaltsbox wird als Referenzbox verwendet. Die Referenzbox eines

ist die Rahmenbox seiner Tabellenrahmenbox, nicht seiner Tabellenbox.

border-box

Die Rahmenbox wird als Referenzbox verwendet. Die Referenzbox eines

ist die Rahmenbox seiner Tabellenrahmenbox, nicht seiner Tabellenbox.

fill-box

Die Objektbegrenzungsbox wird als Referenzbox verwendet. Für Elemente mit einer zugehörigen CSS-Layout-Box wirkt sie wie content-box.

stroke-box

Die Strichbegrenzungsbox wird als Referenzbox verwendet. Für Elemente mit einer zugehörigen CSS-Layout-Box wirkt sie wie border-box.

view-box

Der nächste SVG Viewport wird als Referenzbox verwendet. Wenn ein viewBox Attribut für das den SVG Viewport erzeugende Element angegeben ist, wird die Referenzbox am Ursprung des vom viewBox Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenzbox auf die Breite und Höhe des viewBox Attributs gesetzt. Für Elemente mit einer zugehörigen CSS-Layout-Box wirkt sie wie border-box.

Formale Definition

Anfangswertview-box
Anwendbar auftransformierbare Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

transform-box = 
  content-box  |
  border-box   |
  fill-box     |
  stroke-box   |
  view-box

Beispiele

SVG transform-origin Bereich

In diesem Beispiel haben wir ein SVG:

html

Im CSS haben wir eine Animation, die ein Transform verwendet, um das Rechteck unendlich zu drehen. transform-box: fill-box wird verwendet, um die transform-origin zum Zentrum der Begrenzungsbox zu machen, sodass sich das Rechteck an Ort und Stelle dreht. Ohne diese Einstellung ist der Transform-Ursprung das Zentrum der SVG-Leinwand, was zu einem sehr unterschiedlichen Effekt führt.

css
svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}

Vollständiger Dank für dieses Beispiel geht an Pogany; sehen Sie sich diesen Codepen für eine Live-Version an.

Spezifikationen

Specification
CSS Transforms Module Level 1
# transform-box

Browser-Kompatibilität

Siehe auch