onion mk2
onion mk2

Reputation: 371

css transform: translate() % always refer to the size of bounding box?

I'm confused about what specifications says. Let me clarify my understanding.

specifications

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)

my understanding

css-transforms-1

  1. there is transform property.
    transform property refer to bounding box.
    so, translate function of transform property refer to bounding box.

  2. there is not translate property.

css-transforms-2

  1. there is transform property.
    transform property refer to the size of bounding box.
    so, translate function of transform property refer to bounding box.

  2. 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

Answers (1)

Christoph
Christoph

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

Related Questions