CSS3变形中的translate百分比值是相对于它的宽度和/或高度吗？

Question

我认为，在使用百分比值进行CSS3变换translate时，这个百分比是相对于自身的宽度或高度的，因此(50%, 75%)表示自身宽度的50%，自身高度的75%，但我找不到任何规范说明这一点。

例如：https://jsfiddle.net/cstsyw3s/1/
使用：

transform: translate(100%, 100%)

我查看了http://www.w3.org/TR/css3-transforms，但是没有找到相关内容。我只能找到transform-origin的百分比用法，它表示相对于边界框的大小。我认为边界框可能是一个矩形，其宽度和高度取决于元素本身（不包括任何边框）...但我也无法找到除SVG和表格之外的边界框定义。

- nonopolarity

Answer 1

在这个部分中，http://www.w3.org/TR/css3-transforms/#transform-property 提到：

百分比：参考轮廓盒的大小

轮廓盒的定义为(来源)：

对于所有没有关联CSS布局盒子的SVG元素，边框盒子是对象边框盒子，而对于所有其他元素，它是边框盒子。表格的轮廓盒是其表格包装器盒子的边框盒子，而不是其表格盒子。

而边框盒子则为(来源)：

宽度和高度属性包括内边距和边框，但不包括外边距。注意，填充和边框将在盒子内部，例如.box {width: 350px; border: 10px solid black;}会导致渲染在浏览器中宽度为350px的盒子。

希望能对您有所帮助。

- cocoa

---

我明白了...所以它是为“transform”而规定的，而不是“translate”...对于“边界框是所有SVG元素的对象边界框，没有关联CSS布局框的对象和所有其他元素的边框框”，我理解为...“边界框是所有SVG元素的对象边界框，没有（关联CSS布局框的对象和所有其他元素的边框框）”...难怪最后我不知道它的意思...我只是认为它在谈论SVG元素。 - nonopolarity

这是您在寻找的内容吗？ - cocoa

非常明确地说：变换百分比是基于“被变换元素”自身边界框的大小，而不是包含被变换元素的边界框的大小。它基于其自身大小，与宽度、高度、边距等不同。 - Chris Calo

Answer 2

在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>

Example: https://jsfiddle.net/httcg329/1/

- Linghua Jin

Answer 3

是的，你说得对。Transform translate 可以将一个元素移动一定数量的像素（如果使用 px），或者移动元素大小的百分比（如果使用 %）。

因此，如果你有一个 div class='mover'，这个 CSS 会在 x 和 y 轴上将该 div 移动 250px。

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

这里提供一个简单的 jsfiddle 作为示例进行玩耍。

- Miles