我认为当我们使用百分比值进行
CSS3变换转换时,这个百分比是相对于它自己的宽度或高度的,所以(50％,75％)意味着它自己宽度的50％,它的75％自己的高度,但我找不到任何说明的规格.
示例：https://jsfiddle.net/cstsyw3s/1/
使用：
transform: translate(100%,100%)
我查看了http://www.w3.org/TR/css3-transforms,但找不到它在那里提到 – 我只能找到像变换原点,“百分比：参考边界框的大小”,我认为边界框可能是矩形元素的宽度和高度. (不包括任何边框)…但除了SVG和表格之外,我找不到边界框的定义.
解决方法
在本节
http://www.w3.org/TR/css3-transforms/#transform-property中,它指出：
Percentages: refer to the size of 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.
我希望这有帮助
