CSS - transform-box 属性

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%; /* anything other than `0 0` to see the effect */
	 	 	 transform-box: content-box;
	 	 	 animation: rotateBox 3s linear infinite;
	 	}
	 	#box1 {
	 	 	 transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
	 	 	 transform-box: border-box;
	 	 	 animation: rotateBox 3s linear infinite;
	 	}
	 	#box2 {
	 	 	 transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
	 	 	 transform-box: view-box;
	 	 	 animation: rotateBox 3s linear infinite;
	 	}
	 	#box3 {
	 	 	 transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
	 	 	 transform-box: fill-box;
	 	 	 animation: rotateBox 3s linear infinite;
	 	}
	 	#box4 {
	 	 	 transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
	 	 	 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>

打印本页