transform-box

**transform-box** CSS 属性定义了与 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-box

内容框用作参考框。<table> 的参考框是其 表格包装框 的边框框，而不是其表格框。

border-box

边框框用作参考框。<table> 的参考框是其 表格包装框 的边框框，而不是其表格框。

fill-box

对象边界框用作参考框。对于具有关联 CSS 布局框的元素，其作用与 content-box 相同。

stroke-box

描边边界框用作参考框。对于具有关联 CSS 布局框的元素，其作用与 border-box 相同。

view-box

最近的 SVG 视口用作参考框。如果为创建 SVG 视口的元素指定了 viewBox 属性，则参考框位于由 viewBox 属性建立的坐标系的原点，并且参考框的尺寸设置为 viewBox 属性的宽度和高度值。对于具有关联 CSS 布局框的元素，其作用与 border-box 相同。

正式定义

初始值view-box
应用于可变换元素
继承否
计算值按指定
动画类型离散

正式语法

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

示例

SVG 变换原点范围

在此示例中，我们有一个 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-box: fill-box 用于使 transform-origin 成为边界框的中心，因此矩形在原地旋转。如果没有它，变换原点是 SVG 画布的中心，因此您会得到截然不同的效果。

css
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);
  }
}

此示例的全部功劳归于 Pogany；请参阅 此 codepen 以获取实时版本。

规范

规范
CSS 变换模块级别 1
# transform-box

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅