WebKit CSS animation: how to get perspective to work?

Discussion in 'Public Game Developers Forum' started by Adams Immersive, Jan 26, 2009.

  1. Adams Immersive

    Adams Immersive Well-Known Member

    Dec 5, 2008
    1,715
    1
    38
    Freelance interactive design and programming
    Ohio
    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.
     
  2. Adams Immersive

    Adams Immersive Well-Known Member

    Dec 5, 2008
    1,715
    1
    38
    Freelance interactive design and programming
    Ohio
    Weird but it works

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

    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.
     

Share This Page