Transform3d (): using percent to move inside the parent

Question

CSS has standard behavior when moving an object as a percentage, which percentage represents the dimensions of its parent container (div).

This is not true when using CSS3 transform: translate3d() . When using percentage values ​​for X, Y, or Z coordinates, the percentage represents the dimensions of the current object , not its parent.

Now the problem should be obvious: if I need to use CSS3 animations and transform: translate3d() to move the current object within the dimensions of its dynamically re-significant parent, I just don't know how to do this. Example: using translate3d(100%, 0, 0) will cause the object to move along the physical width of the current object, and not to its containing block.

Any ideas on how to get the dynamically resizing parent, please? Or how to make the current object to translate inside its parent using hardware accelerated translate3d() ?

The Mozilla development network confirms that: Percentage (in transitions) refers to the size of the bounding box.

Is there any solution?

Answer 1

I don't think there is only a CSS solution. My approach calculates the relationship between the width of the wrapper element and the width of the child element with JavaScript before it is multiplied by the target value of X:

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

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

Answer 2

Unfortunately, this is not possible with pure CSS if you do not want to use view units, and even then it will be a selective calculation of the width of the parent if it differs from the width of the viewport. For percent sizes of parent dimensions you will need to use Javascript.

Here is a simple example of JS. http://cssdeck.com/labs/bus53o22

Answer 3

To use the Z axis without fixed values, use:

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

Rotate the object before moving and rotate again to normalize the position. Tested in Google Chrome.

Answer 4

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