transform3d(): Using Percentage to Move Within Parent Object

Question

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 translate3d()?

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

Is there any workaround please?

Charmainecharmane

Answer 1

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/

Kure

hi and thank you for your response. I see, that your solution is to use JS. If you agree, I will try to keep this thread open. Maybe somebody comes with working CSS solution. Anyway +1 for working solution. Thanks. – Charmainecharmane

Answer 2

Unfortunately this isn't possible with pure CSS unless you're willing to use viewport units - and even then it'd be some selective calculation of parent width if it was different to viewport width. For percentage of parent dimensions, you'll need to use Javascript.

Here's a simple JS example. http://cssdeck.com/labs/bus53o22

Bitters

hi and thanks. I get the idea to use JavaScript to dynamically calculate values and then to adjust translate3d() of the object via JS. I would still prefer seeing, if there is CSS only solution. I will keep this thread open, as the information could be useful to you as well. But thanks for your help and +1. – Charmainecharmane

Answer 3

@Bunkai.Satori To do that in pure css, just put that element in a new container that matches the parent width and height, then use transform3d() on the new container.

Impertinent

Answer 4

To use Z axis without fixed values, use:

transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);

That rotate object before move, and rotate again to normalize position. Tested in Google Chrome.

Bloodletting