CSS 属性

CSS属性transform-box决定与变换属性相关的布局框，例如transform、translate、scale、rotate 和 transform-origin。

属性值

CSS 属性Transform-box 可以包含以下关键字值之一:

  • content-box:这是默认值。转换应用于元素的内容框。

  • border-box:转换应用于元素的边框框。

  • fill-box:针对元素的绘画区域应用变换，不包括任何描边。

  • stroke-box:应用变换相对于笔划边界框，其中包括笔划区域及其占据的空间。

  • view-box:针对最近的 SVG 视口应用变换。

适用范围

所有可变形元素。

语法

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

CSS transform-box: 示例

通过并排比较框，您应该能够观察到框变换，如下所示:

<html>
<head>
<style>
   svg {
      width: 120vh;
      border: 1px solid #d9d9d9;
      position: relative;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }

   #box {
      transform-origin: 50% 50%; /* 除了"0 0"之外的任何内容来查看效果 */
      transform-box: content-box;
      animation: rotateBox 3s linear infinite;
   }
   #box1 {
      transform-origin: 50% 50%; /* 除了"0 0"之外的任何内容来查看效果 */
      transform-box: border-box;
      animation: rotateBox 3s linear infinite;
   }
   #box2 {
      transform-origin: 50% 50%; /* 除了"0 0"之外的任何内容来查看效果 */
      transform-box: view-box;
      animation: rotateBox 3s linear infinite;
   }
   #box3 {
      transform-origin: 50% 50%; /* 除了"0 0"之外的任何内容来查看效果 */
      transform-box: fill-box;
      animation: rotateBox 3s linear infinite;
   }
   #box4 {
      transform-origin: 50% 50%; /* 除了"0 0"之外的任何内容来查看效果 */
      transform-box: stroke-box;
      animation: rotateBox 3s linear infinite;
   }

   @keyframes rotateBox {
      to {
         transform: rotate(360deg);
      }
   }
</style>
</head>
<body>
   <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <text x="0" y="5" fill="red" font-size="5px">content-box</text>
      <g stroke-width="1">
         <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>
      <br/>
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <text x="0" y="5" fill="red" font-size="5px">border-box</text>
      <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="box1"
            x="10"
            y="10"
            width="10"
            height="10"
            rx="1"
            ry="1"
            stroke="black"
            fill="none" />
      </g>
      </svg>
      <br/>
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <text x="0" y="5" fill="red" font-size="5px">view-box</text>
      <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="box2"
            x="10"
            y="10"
            width="10"
            height="10"
            rx="1"
            ry="1"
            stroke="black"
            fill="none" />
      </g>
      </svg>
      <br/>
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <text x="0" y="5" fill="red" font-size="5px">fill-box</text>
      <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="box3"
            x="10"
            y="10"
            width="10"
            height="10"
            rx="1"
            ry="1"
            stroke="black"
            fill="none" />
      </g>
      </svg>
      <br/>
      <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <text x="0" y="5" fill="red" font-size="5px">stroke-box</text>
      <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="box4"
            x="10"
            y="10"
            width="10"
            height="10"
            rx="1"
            ry="1"
            stroke="black"
            fill="none" />
      </g>
      </svg>
</body>
</html>