CSS3转换是否转换相对于其宽度和/或高度的百分比值？ [英] Is the CSS3 transform translate percentage values relative to its width and/or height?
问题描述
我认为的确是这样，当我们使用百分比值进行CSS3转换翻译时，该百分比相对于自己的宽度或高度，因此（50％，75％）表示50占其自身宽度的百分比，占其自身高度的75％，但我找不到任何说明这一点的规范。
I think it is true that when we do a CSS3 transform translate using a percentage value, then that percentage is relative to its own width or height, so (50%, 75%) means 50% of its own width, 75% of its own height, but I can't find any specs that say that.
示例： https://jsfiddle.net/cstsyw3s / 1 /
使用：
Example: https://jsfiddle.net/cstsyw3s/1/
using:
transform: translate(100%, 100%)
我调查了 http://www.w3.org/TR/css3-transforms ，但找不到在那里提到的内容-我只能找到
I looked into http://www.w3.org/TR/css3-transforms but can't find it mentioned there -- I could only find such as for transform-origin, the "percentages: refer to the size of bounding box", and I think the bounding box probably is rectangle with the element's width and height. (not including any border)... but I can't find a definition for bounding box except for SVG and table either.
推荐答案
在此部分 http://www.w3.org/TR/css3 -transforms /＃transform-property 它指出：
百分比：指边界框的大小
Percentages: refer to the size of bounding box
边界框的定义是（源）
边界框是所有没有关联的SVG元素的对象边界框CSS布局框和所有其他元素的边框。表格的边框是表格包装盒的边框，而不是表格框。
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.
边框是（< a href = https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing rel = noreferrer>源）
width和height属性包括填充和边框，但不包括边距。请注意，填充和边框将位于框内，例如.box {width：350px; border：10px纯黑色；}导致在浏览器中呈现的框的宽度为：350px。
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.
我希望这会有所帮助
这篇关于CSS3转换是否转换相对于其宽度和/或高度的百分比值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
