Monday, September 8th, 2008
iPhone apps get a lot of attention and press and understandably so. For a lot of iPhone app developers, these tiny apps can turn into a tremendous cash cow making development for the phone platform invaluable. But considering that the iPhone is running Safari on it, it’s surprising that we haven’t seen a whole lot more buzz surrounding the use of the new Webkit functionality available to the browser.
Paul Bakaus, lead developer for the jQuery UI team, has started exploring the possibilities of what Safari can offer to web application developers:
So I wasn’t content with the things I’ve tried doing in Safari, and recently began digging through the documentation of the iPhone SDK and the actual CSS Transforms spec.
I was a bit skeptical when I first read about all the cool functions that work in Webkit iPhone, but nowhere else, because there was little documentation, and literally nothing done by other developers, no demos, no tests. I thought, surely, some students with too much free time must have jumped on that immediately?
Seems like Paul was on the right track as finding information on taking advantage of there features for the iPhone was scarce. So by using a iPhone simulator, Paul was able to start hacking at some of the built-in Webkit features, especially the 2D CSS Transforms.
Here comes the cool stuff: The perspective function seems to define how the other primitive functions behave.
Let’s have a look at a practical example: Take a look at the following three functions:
* rotateX – Rotates the element on the X axis.
* rotateY – Rotates the element on the Y axis.
* rotateZ – Rotates the element on the Z axis (By default, same as “rotate”)
Try these out – all three will give you flat, 2d animations, although they are, in fact, functions that use a 3D matrix. However, now change the -webkit-perspective property to 200, and try again. Now, you established virtual depth, and all three functions will give you incredible results.
The end result of Paul’s tinkering is a very cool flip effect that is handled within the iPhone’s browser and similar to that found in typical iPhone applications. While only a small demo, this opens up possibilities in how browser-based applications can react within the iPhone and what can be presented to mobile web users.
To see the demo, you will need an iPhone or an iPhone simulator.
Posted by Rey Bango at 8:54 am