Monday, September 8th, 2008

3D CSS Transforms on the iPhone

Category: iPhone, Mobile

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

3.7 rating from 18 votes


Comments feed TrackBack URI

All of this is actually documented very well on the Apple iPhone Webapps Developer site. They have plenty of downloadable, open source demos of all of the webkit transforms, full animation and transform guides, and a whole lot more.

Comment by PaulArmstrong — September 8, 2008

Awesome headsup. I’ll have to play around with this a bit.

Comment by ilazarte — September 8, 2008

I have to disagree with you. While it’s true that I just found the CardFlip demo, actually only after reading your message, the actual documentation doesn’t link to them and often introduces more questions instead of solving them. For example, the perspective thing was pretty hard to find out. Anyway, thanks for your hint about the demos :)

Comment by pbakaus — September 8, 2008

Leave a comment

You must be logged in to post a comment.