transform-box
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
/* 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
<table>
ist die Rahmenbox seiner Tabellenrahmenbox, nicht seiner Tabellenbox. border-box
-
Die Rahmenbox wird als Referenzbox verwendet. Die Referenzbox eines
<table>
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 vomviewBox
Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenzbox auf die Breite und Höhe desviewBox
Attributs gesetzt. Für Elemente mit einer zugehörigen CSS-Layout-Box wirkt sie wieborder-box
.
Formale Definition
Initialer Wert | view-box |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
SVG transform-origin Bereich
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 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.
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
BCD tables only load in the browser
Siehe auch
- Verwendung von CSS-Transformationen
transform
,transform-origin
- Individuelle Transform-Eigenschaften: