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.

Answer 1

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