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 |
浏览器兼容性
加载中…