z in translate3d

Question

Can anyone explain or point me to an example where the "z" in translate3d (webkit transform) is being used? I have successfully used translate3d(x,y,0) to get hardware accelerated 2D animations on mobile Safari, but now I’m trying to scale using the z parameter, but it does not seem to have any effect...

elem.style.WebkitTransform = 'translate3d(100px,0,0)'; // this works as expected
elem.style.WebkitTransform = 'translate3d(0,0,100)'; // nothing happens
elem.style.WebkitTransform = 'translate3d(0,0,100px)'; // nothing happens
elem.style.WebkitTransform = 'scale(1.2, 1.2)'; // works but slow on ios

Sidenote: I’m trying to build a small zoom script that works smoothly on ios.

Answer 1

Remember to set the -webkit-perspective on the containing box. 800 is a good starting value. If the box disappears, reduce it, it's probably bigger than the viewport.

The Surfin' Safari blog has an article from when 3d transforms were first invented:

-webkit-perspective is used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. You can think of it as though you’re looking at the page from a distance p away. Objects on the z=0 plane appear in their normal size. Something at a z offset of p/2 (halfway between the viewer and the z=0 plane) will look twice as big, and something at a z offset of -p will look half as big. Thus, large values give a little foreshortening effect, and small values lots of foreshortening. Values between 500px and 1000px give a reasonable-looking result for most content.

More here: http://www.webkit.org/blog/386/3d-transforms/

Answer 2

I made this for you to show how webkit transform 3D works:

http://jsbin.com/iderag

I hope it help you. I'm guessing you don't have -webkit-perspective in your body or parent tag.