In reading about CSS3 Animations, I’ve seen references like this: transform: translate3d(-100%, 0, 0); and I would like to know what is the reference point? In other words, move in the x-direction by -100% of what?
Percentages in transforms are based on the object being transformed rather than, like with other css, the container. So giving a div margin of -100% will shift it left 100% of the width of the container area while your transform (transforming x) would shift it 100% of the width of the div itself.
1 Like
Thanks for that explanation. Things now make a lot more sense to me.
1 Like