Sep
3

Webkit CSS 3D + Local DB Demo

By admin  //  CSS, Dev, iPhone, Sandbox, WebKit  //  14 Comments

css 3D screenshot

Ever since I heard of Snow Loepard’s hardware-accelerated CSS, I wanted try some cool CSS animation for Safari 4.

So after installing Snow Leopard, I spent about a day and half to try creating my first 3D animation with Flickr API.
Honestly, I wasn’t sure where to get started to make some cool 3D effect, so what I did was I tried to reproduce the one on webkit.org example and modify a lot by trial and error approach.
Also, I have been freqently asked about how I did with “My Favorites” feature on my Palm Pre app (which is also a WebKit-based), so I throw the HTML5′s local storage demo with this 3D demo.

So here, you can try my CSS 3D and Local DB Demo!!!
Be sure to view this demo on Safari 4, iPhone Safari, or WebKit Nightly! This doesn;t seem to work on other Webkit-based browsers such as Chrome and Palm.

I am not going to write a whole tutorial how to replicate this animation but I try to explain some examples.

Spin a Wheel!

Look at one of the flicke photo wheel on my demo. This is a combination of a few different animation.
Let’s focus on the small wheel inside. This is the snippet of HTML of the wheel:



<div id="gallery">
  <div id="pic01"><img src="..."/></div>
  <div id="pic02"><img src="..."/></div>
  ... (10 more imgs)
</div>

3D Cood
OK, for now, let’s ignore how each photo is rendered to form a loop, and just focus on the animation of one div, #gallery (= a wheel). A band of photos is ratating clockwise around Y-axis.
This means the animation starts as -webkit-transform: rotateY(0); and goes around an circle for a whole 360 degree. -webkit-transform: rotateY(-360deg);.
Use positive if you want to rotate in opposite direction.
I set the whole circle completion span as 60 seconds in linier motion and the animation goes infinite.

This diagram from Apple’s Safari Reference Library explains coordinates.

So the css for this movement is defined as:


#gallery {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: spinY 60s linear infinite;
}



@-webkit-keyframes spinY {
  from { -webkit-transform: rotateY(0);}
  to   { -webkit-transform: rotateY(-360deg);}
}

Use 3D style, -webkit-transform-style: preserve-3d;to give 3D illusion. I set the initial perspective in its parent div as -webkit-perspective: 380;.
It gives you an illusion of the depth. You can make the value lower to make it look more up-close to you.
The unit of perspective should be “px”, but it looks like you’d better remove it for iPhone.

perspective 200 perspective 400
perspective 500 perspective 0

To figure out how to render each photo in loop, also other animations, please look at the source code of my demo.

Also, I will write about how to use HTML 5′s local storage sometimes later!

References

Author:

Short story: keeping my website since 1996, finally started this blog in 2007. Long story: see "About" page!

has written 76 articles for us.

14 Comments to “Webkit CSS 3D + Local DB Demo”

  • Webkit CSS 3D + Local DB Demo | IPhoneMate September 3, 2009 at 6:20 am

    [...] here to read the rest: Webkit CSS 3D + Local DB Demo Share and [...]

  • pondhopper September 14, 2009 at 10:58 am

    That is SICK!
    too cool 4 skool

  • Andy October 1, 2009 at 10:43 am

    Killer demo, looking forward to the writeup on local storage too!

  • bernhard November 4, 2009 at 11:36 am

    Small 3d CSS Tutorial:

    http://www.khtml.org/3dtut/

  • Nathan Duran November 7, 2009 at 11:55 am

    This stuff is too good for Yahoo anyway.

  • robert January 10, 2010 at 5:48 am

    This is really cool too bad it does not work in google chrome

  • admin January 10, 2010 at 12:58 pm

    Also I’ve tried a few more Webkit based mobile browsers and found 3D doesn’t work on Palm Pre or Android (incl. Nexus One), while supported on iPhone Safari and iCab Mobile!

  • vlad February 22, 2010 at 4:00 am

    You are my new hero! this stuff is so cool. I need to learn how to create websites like this. or css animation and html5… I’m obviously new on web development. any tips on where to start?

  • webseite erstellen April 7, 2010 at 7:44 am

    These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

  • Derek May 7, 2010 at 4:16 pm

    It works on Chrome 5.

  • admin May 7, 2010 at 5:17 pm

    Hi Derek!
    Does the perspective work on the browser you are on too?

    I tested on Chrome 5.0.396.0 dev (Chromium) for Mac, and -webkit-perspective failed. The “wheels” don’t get the depth so the “3D effect” doesn’t look quite right.

  • Richard Kimber June 12, 2010 at 4:40 am

    3D now works on Windows using Safari 5!

  • Derek May 24, 2011 at 10:15 pm

    Google Chrome does support CSS 3D transition.
    And also can I control the spinning?

Leave a comment