WebKit CSS animation: how to get perspective to work?

[Adams Immersive]

I know, Web apps are so 2008... but this is just for my site, not a real app :)

Despite following numerous examples, my 3D CSS animations for iPhone WebKit all lack perspective.

I wrap the animated elements in a <div> with:

-webkit-transform-style: preserve-3d;
-webkit-perspective: 500;

And for good measure, I put those same properties on the divs that are being directly animated.

No good--things don't look smaller with distance. No perspective.

Any thoughts?

Thanks in advance.

[Adams Immersive]

Well, after hours of struggling, I solved it just after posting... why does that happen? :o

It may be a bug or something, but I worked around it. In case it helps someone else, this seems to be the explanation:

* I had a div spinning in space, containing other divs, all laid out flat in a common plane. No 3D variation within that plane; still, the whole plane of images should show perspective as it spins! But it didn't.

* As soon as I added a little X or Y rotation to even ONE of the individual inner divs, the whole scene gained perspective.

That seems wrong--the original rotation WAS in 3D, and so it ought to show perspective no matter whether the divs inside are in a single plane or not. (And my perspective tags were wrapped in a separate div around that animation--so its children should have shown perspective.)

But it works now, so I'm good.