Question

我认为当我们使用百分比值进行CSS3变换转换时，那个百分比是相对于自己的宽度或高度，所以（50％，75％）意味着50它自身宽度的百分比，它自身高度的75％，但我找不到任何说明的规格。

transform: translate(100%, 100%)

我查看了http://www.w3.org/TR/css3-transforms，但无法在那里找到它 - 我只能找到transform-origin这样的＆＃34;百分比：参考边界框的大小＆＃34;，我认为边界框可能是带有元素宽度和高度的矩形。（不包括任何边框）......但除了SVG和表格之外，我找不到边界框的定义。

Answer 1

在本节http://www.w3.org/TR/css3-transforms/#transform-property中，它指出：

百分比：参考边界框的大小

边界框的定义是（source）

边界框是所有SVG元素的对象边界框，没有关联的CSS布局框和所有其他元素的边框框。表的边界框是其表格包装盒的边框，而不是其表格框。

边框是（source）

width和height属性包括填充和边框，但不包括边距。请注意，填充和边框将位于框内部，例如.box {width：350px; border：10px solid black;}导致在浏览器中呈现的宽度为350px的框。

我希望这会有所帮助

Answer 2

是的，你是对的。如果使用px，则变换平移会将元素移动一定数量的像素，如果使用％，则移动要移动的元素大小的百分比。

所以如果你有一个div class =＆＃39; mover＆＃39;这个css会在x和y轴上移动div 250px。

.mover {width: 100px;
height: 100px;
-webkit-transform: translate(250%, 250%);
background: #000;}

以下是一个简单的jsfiddle作为例子。

Answer 3

在chrome（在v59中测试）中，百分比是根据边界框的尺寸加边框计算的。

如果一个元素的宽度为200px，边界为50px，我们应用类似transform的变换：translate（100％，0）总平移距离为200px + 50 * 2 = 400px。

在这种情况下，如果您希望翻译距离为100px，则可以随时添加box-sizing：border-box

section {
  width:400px;
  height:400px;
  background: #f0ad4e;
}

span {
  display:block;
  background:red;
  width:200px;
  height:200px;
  border:100px solid black;
  transform: translate(100%, 0);
}

<section>
  <span class="center">hello world</span>
</section>

实施例： https://jsfiddle.net/httcg329/1/

CSS3变换是否相对于宽度和/或高度转换百分比值？

3 个答案: