Charles Ying has created a collection of components and code examples that illustrate the power of CSS visual effects on the iPhone. Officially named CSS-VFX, the project has yielded it’s first very cool little web app called Zflow.
When you click on an image, Zflow zooms + rotates the focused image forward by setting a “CSS Transitioned” 3D transform on the focused image. Clicking again transitions the image back.
When sliding through the image set, Zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, the projected velocity is calculated and sets the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.
It really is a beautiful piece of work. For those who are not browsing with an iPhone/iTouch, check out the video:
[youtube sHLaHGxIzb4 371 300]
Check out a simple demo (iPhone/iTouch only) here
See Charles’ demo using the Flickr API (iPhone/iTouch only) here
Download the source here