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

Question

我认为当我们使用百分比值进行CSS3变换转换时,这个百分比是相对于它自己的宽度或高度的,所以(50%,75%)意味着它自己宽度的50%,它的75%自己的高度,但我找不到任何说明的规格.

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

transform: translate(100%, 100%)

我查看了http://www.w3.org/TR/css3-transforms但在那里找不到它 - 我只能找到例如transform-origin"百分比:参考边界框的大小",以及我认为边界框可能是带有元素宽度和高度的矩形.(不包括任何边框)...但除了SVG和表格之外,我找不到边界框的定义.

Answer 1

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

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

边界框的定义是(源)

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

边框是(来源)

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

我希望这有帮助