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

【问题标题】：Is the CSS3 transform translate percentage values relative to its width and/or height?CSS3 转换是否相对于其宽度和/或高度转换百分比值？
【发布时间】：2017-08-10 15:59:14
【问题描述】：

我认为当我们使用百分比值进行 CSS3 转换转换时，该百分比是相对于 它自己的宽度或高度的，所以 (50%, 75%) 表示 50自身宽度的 %，自身高度的 75%，但我找不到任何这样说的规范。

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

transform: translate(100%, 100%)

我查看了http://www.w3.org/TR/css3-transforms，但在那里找不到它——我只能找到诸如transform-origin之类的“百分比：指边界框的大小”，我认为边界框可能是具有元素宽度和高度的矩形。（不包括任何边框）...但除了 SVG 和表格，我也找不到边界框的定义。

【问题讨论】：

标签： css css-transforms

【解决方案1】：

在本节http://www.w3.org/TR/css3-transforms/#transform-property 中声明：

百分比：指边界框的大小

bounding box的定义是(source)

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

边框是(source)

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

希望对你有帮助

【讨论】：

我明白了...所以它是为 transform 指定的，而不是 translate... 对于“边界框是所有 SVG 元素的对象边界框，没有关联CSS 布局框和所有其他元素的边界框”，我将其读为...“边界框是所有 SVG 元素的对象边界框，没有（关联的 CSS 布局框和所有其他元素的边界框）” ...难怪我不知道最后是什么意思...我只是以为是在谈论 SVG 元素
这是您要找的吗？
非常清楚：变换百分比基于变换元素自己的边界框的大小，而不是包含变换元素的边界框的大小。它基于自己的大小，不像宽度、高度、边距等。

【解决方案2】：

是的，你是对的。如果使用 px，Transform translate 将元素移动一定数量的像素，如果使用 %，则移动元素大小的百分比。

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

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

这里有一个简单的jsfiddle 作为示例。

【讨论】：

【解决方案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/

【讨论】：