transform-box

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

Syntax

/* 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 Inhaltsbox wird als Referenzbox verwendet. Die Referenzbox eines <table> ist die Randbox ihres Table Wrapper Box, nicht ihre Tabellenbox.

border-box

Die Randbox wird als Referenzbox verwendet. Die Referenzbox eines <table> ist die Randbox ihres Table Wrapper Box, nicht ihre Tabellenbox.

fill-box

Die Begrenzungsbox des Objekts wird als Referenzbox verwendet. Für Elemente mit zugeordnetem CSS-Layout-Box verhält es sich wie content-box.

stroke-box

Die Begrenzungsbox des Strichs wird als Referenzbox verwendet. Für Elemente mit zugeordnetem CSS-Layout-Box verhält es sich wie border-box.

view-box

Der nächstgelegene SVG-Viewport wird als Referenzbox verwendet. Wenn ein viewBox-Attribut für das SVG-Viewport-erstellende Element angegeben ist, wird die Referenzbox am Ursprung des vom viewBox-Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenzbox auf die Breiten- und Höhenwerte des viewBox-Attributs gesetzt. Für Elemente mit zugeordnetem CSS-Layout-Box verhält es sich wie border-box.

Formale Definition

Formale Syntax

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

Beispiele

SVG transform-origin Bereichsfestlegung

In diesem Beispiel haben wir ein SVG:

<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 sie ist der Transformationsursprung das Zentrum der SVG-Leinwand, was einen sehr unterschiedlichen Effekt ergibt.

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

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Transformationen
• transform, transform-origin
• Einzelne Transformations-Eigenschaften:
  • translate
  • scale
  • rotate