★ TouchArcade needs your help. Click here to support us on Patreon.

WebKit CSS animation: how to get perspective to work?

01-26-2009, 04:42 PM
#1
WebKit CSS animation: how to get perspective to work?

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:

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

Morgan Adams (GameCenter: “Adams Immersive”)
My upcoming first game: Scree (Forum thread)
My upcoming VR horror experience: This is Not the Church of the Worm (Forum thread)
Stop making lists. Organize with shapes and colors instead: DotSpace (Forum thread)
01-26-2009, 04:57 PM
#2
Weird but it works

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

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.

Morgan Adams (GameCenter: “Adams Immersive”)
My upcoming first game: Scree (Forum thread)
My upcoming VR horror experience: This is Not the Church of the Worm (Forum thread)
Stop making lists. Organize with shapes and colors instead: DotSpace (Forum thread)