Reputation: 371
I'm confused about what specifications says. Let me clarify my understanding.
https://www.w3.org/TR/css-transforms-1/#propdef-transform
Percentages: refer to the size of bounding box
https://drafts.csswg.org/css-transforms-2/#propdef-translate
Percentages: relative to the width of the containing block (for the first value) or the height (for the second value)
there is transform
property.
transform
property refer to bounding box.
so, translate
function of transform
property refer to bounding box.
there is not translate
property.
there is transform
property.
transform
property refer to the size of bounding box.
so, translate function of transform
property refer to bounding box.
there is translate
property.
translate
property refer to containing box.
so, I think that % of transform: translate()
always refer to bounding box,
is this right?
Upvotes: 3
Views: 368
Reputation: 1630
Your second link was just a draft to be used for discussion. As far as I know it hasn't made it into final CSS standards or implementations.
So your guess is right, percentages are related to the element's bounding box, not to the containing block.
Upvotes: 1