3D CSS Transforms on the iPhone9
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?
Well, I decided to give it a go, and started Dashcode, created a new web application and hacked in some CSS Transforms into my elements. One very important discovery I’ve made is that only 2D CSS Transforms are directly visible on the WYSIWYG canvas in Dashcode. So when you think the actual 3D functions won’t work, run the iPhone simulator.
The iPhone simulator is actually capable of using the exact same API than the iPhone. This is awesome and a bit funny, since I always thought the 3D functions don’t work in the browser version of Safari yet, because they need to be bundled tightly to the hardware, but apparently, there must be a different reason.
The function that sounded the most awesome, I thought, was the -webkit-perspective function (“This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer’s position”, that just HAS to be awesome). The frustration came directly afterwards: The function did nothing.
At least, that is what I thought at first – the function does indeed nothing visually, if you don’t use any other transform functions. I believe this fact is nowhere written in the SDK docs, and it was hard to find out.
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.
To demonstrate it, here’s a demo that you have to either look at on your iPhone or in the iPhone Simulator:
As an extra flavor, this demo also uses the -webkit-backface-visibility property set to ‘hidden
‘, to hide the actual back side of the first element when the second element comes in (otherwise, you’d see the front flipped). Also, it’s lightning fast, even on the iPhone, since it uses Webkit’s native CSS Transitions, and triggers them via setting the webkitTransform css property.
Expect more to come soon!
Cheers,
Paul
9 Comments
James Urquhart on August 31st, 2008
Interesting. I wonder how complex a 3d scene could be made using these transformations.
Peter Higgins on September 8th, 2008
In the meantime (before the webkit css transitions work in all the major browsers) you can use dojox.fx.flip
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html
Guillaume Laforge on September 8th, 2008
It can be neat to use this 3D transform for doing a “cover flow” effect.
Matthew Congrove on September 9th, 2008
Be aware that while the perspective functions look awesome, there are still some bugs to work out. Try putting a form field into the front (or back) face of this demo, then trying typing into the field. You’ll notice that all of the characters you enter after the first are missing. They’re there, but just not visible; not until you focus out of the form field. So while it might look pretty, it’s not always practical.
An example of this bug can be found here:
http://i.mydailyphoto.com/login.php
OndraM on September 9th, 2008
dojo.fx.flip – WTF!? Is that a canvas/svg trick?
Nicola Rizzo on September 10th, 2008
No svg or canvas, dojox.fx.flip is based on a css border animation 
Nicola
bunnyhero on September 15th, 2008
the fact that the -webkit-perspective property does nothing by itself would not be a surprise to those familiar with 3d graphics already. the apple documentation seems to assume that the reader already has a background in the math behind 3d graphics, which is why it appears to be so sparse.
Xavier on March 17th, 2009
Not really for Iphone, but about css in js…
I made this little helper to have more flexibility in my js.
This make (future) standard css names with the specific css names:
document.css = (function()
{
var
c={},
d=document.createElement(‘div’);
for(k in d.style)
c[k.replace((/^(WebKit|Moz|Kml)/gi),'')
.replace( (/(^.?)/i),
function(a){ return a.charAt(0).toLowerCase()+a.substr(1); } )]=k;
return c;
})();
// Then use like:
// Want to know if css.transform
alert( document.css.transform );
// Want to play with the property
this.style[document.css.transform] = ‘xxx’ ;
nf on August 28th, 2008
Cool demo, Paul. I had no idea these features were even in the iPhone WebKit engine.
The reason why the simulator can draw the 3D also is because the iPhone’s graphics layer uses an implementation of OpenGL which is also available on desktop Macs. The simulator is almost identical in its display/audio characteristics to the device itself.