Bunkai.Satori Bunkai.Satori - 9 months ago 36
CSS Question

transform3d(): Using Percentage to Move Within Parent Object

CSS has standard behavior, when moving an object in percentage, that this percentage represents dimensions of its parent container (div).

This is not true when using CSS3

transform: translate3d()
. If using percentage values for either X, Y, or Z coordinate, the percentage represents dimensions of the current object, not its parent.

The problem should be obvious now: if I need to use CSS3 animation and
transform: translate3d()
to move current object within dimensions of its dynamically re-sizable parent I simply do not know how to do it. An example: using
translate3d(100%, 0, 0)
will move the object by the physical width of the current object, not its containing block.

Any ideas how to get dynamically changing dimensions of parent, please? Or how to make the current object to translate within its parent using hardware accelerated

Mozilla Developer Network confirm that: Percentages(in transitions) refer to the size of bounding box.

Is there any workaround please?


I don't think there's a CSS-only solution. My approach is calculating the relation between the width of the wrapping element and the width of the child with JavaScript before multiplying it with your target X-value:

var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

Here's a working example of what I mean: http://jsfiddle.net/Whre/7qhnA/2/