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.
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.