transform3d(): Using Percentage to Move Within Parent Object

css css-animations css-transforms translate3d
Bunkai.Satori picture Bunkai.Satori · Jul 30, 2014 · Viewed 9.2k times · Source

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?

Answer

SVSchmidt picture SVSchmidt · Jul 30, 2014

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/

Related questions

CSS keyframe animation with translation transform snaps to whole pixels in IE 10 and Firefox

It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation. Chrome and Safari does not, which looks a lot better when animating subtle movements. The animation …

Read More
How can I create pure CSS 3-dimensional spheres?

tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and animate a 3…

Read More
How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More