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-Eigenschaft, die individuellen Transformations-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 einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

content-box

Die Content-Box wird als Referenz-Box verwendet. Die Referenz-Box eines <table> ist die Rahmen-Box ihres Tabellenumschlags, nicht ihre Tabellen-Box.

border-box

Die Rahmen-Box wird als Referenz-Box verwendet. Die Referenz-Box eines <table> ist die Rahmen-Box ihres Tabellenumschlags, nicht ihre Tabellen-Box.

fill-box

Die Objektbegrenzungsbox wird als Referenz-Box verwendet. Für Elemente mit zugeordnetem CSS-Layout-Box verhält sie sich wie content-box.

stroke-box

Die Umrissbegrenzungsbox wird als Referenz-Box verwendet. Für Elemente mit zugeordnetem CSS-Layout-Box verhält sie sich wie border-box.

view-box

Der nächstgelegene SVG-Viewport wird als Referenz-Box verwendet. Wenn ein viewBox-Attribut für das SVG-Viewport-erstellende Element angegeben ist, wird die Referenz-Box am Ursprung des durch das viewBox-Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenz-Box auf die Breite und Höhe des viewBox-Attributs eingestellt. Für Elemente mit zugeordnetem CSS-Layout-Box verhält sie sich 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
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
      id="box"
      x="10"
      y="10"
      width="10"
      height="10"
      rx="1"
      ry="1"
      stroke="black"
      fill="none" />
  </g>
</svg>

Im CSS haben wir eine Animation, die eine Transformation verwendet, um das Rechteck unendlich zu drehen. transform-box: fill-box wird verwendet, um den transform-origin auf das Zentrum der Begrenzungsbox zu setzen, sodass das Rechteck an Ort und Stelle rotiert. Ohne diese Einstellung ist der Transformationsursprung das Zentrum der SVG-Leinwand, was einen ganz anderen Effekt ergibt.

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

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

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

Spezifikationen

Specification
CSS Transforms Module Level 1
# transform-box

Browser-Kompatibilität

Siehe auch