Is the CSS3 transform translate percentage values relative to its width and/or height?

Question

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.

Example: https://jsfiddle.net/cstsyw3s/1/
using:

transform: translate(100%, 100%)

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.

Solution

In this section http://www.w3.org/TR/css3-transforms/#transform-property it states:

Percentages: refer to the size of bounding box

The definition of bounding box is (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.

And border box is (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.

I hope this helps

Comments

[nonopolarity]

I see... so it for spec'ed for transform, not translate... for the line "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", I read it as... "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)"... no wonder I didn't know what it meant at the end... I just thought it was talking about SVG elements

[cocoa]

is this what you were looking for?

[manafi]

To be exceedingly clear: transform percentages are based on the size of the transformed element's own bounding box, not the size of the bounding box that contains the transformed element. It's based on its own size, unlike width, height, margins, etc.