css - 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它指出:

Percentages: refer to the size of bounding box

bounding box的定义是(source)

A bounding box is the object bounding box for all SVG elements without an associated CSS layout box and the border box for all other elements. The bounding box of a table is the border box of its table wrapper box, not its table box.

边框框是 ( source )

The width and height properties include the padding and border, but not the margin. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} lead to a box rendered in the browser of width: 350px.

希望对你有帮助