transform-box
Baseline 廣泛可用 *
transform-box CSS 屬性定義了 transform、單獨的 transform 屬性 translate、scale 和 rotate 以及 transform-origin 屬性所關聯的佈局框。
語法
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;
transform-box 屬性使用下面列出的關鍵字值之一指定。
值
content-boxborder-boxfill-box-
物件邊界框用作參考框。對於具有關聯 CSS 佈局框的元素，其行為類似於
content-box。 stroke-box-
描邊邊界框用作參考框。對於具有關聯 CSS 佈局框的元素，其行為類似於
border-box。 view-box-
最近的 SVG 視口用作參考框。如果 SVG 視口建立元素指定了
viewBox屬性，則參考框位於viewBox屬性建立的座標系原點處，並且參考框的尺寸設定為viewBox屬性的寬度和高度值。對於具有關聯 CSS 佈局框的元素，其行為類似於border-box。
正式定義
正式語法
transform-box =
content-box |
border-box |
fill-box |
stroke-box |
view-box
示例
SVG transform-origin 作用域
在此示例中，我們有一個 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>
在 CSS 中，我們有一個使用 transform 無限旋轉矩形的動畫。transform-box: fill-box 用於使 transform-origin 成為邊界框的中心，因此矩形會原地旋轉。如果沒有它，transform origin 將是 SVG 畫布的中心，因此您會得到截然不同的效果。
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);
}
}
規範
| 規範 |
|---|
| CSS 變換模組級別 1 # transform-box |
瀏覽器相容性
載入中…