Comments on: 3D CSS Transforms on the iPhone http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/ Capturing the thoughts of Paul Bakaus Mon, 24 Oct 2011 22:49:28 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Xavier http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-86 Xavier Tue, 17 Mar 2009 09:25:23 +0000 http://paulbakaus.com/?p=15#comment-86 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' ; 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’ ;

]]> By: bunnyhero http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-85 bunnyhero Mon, 15 Sep 2008 04:46:38 +0000 http://paulbakaus.com/?p=15#comment-85 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. 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.

]]> By: Nicola Rizzo http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-84 Nicola Rizzo Wed, 10 Sep 2008 20:48:31 +0000 http://paulbakaus.com/?p=15#comment-84 No svg or canvas, dojox.fx.flip is based on a css border animation :) Nicola No svg or canvas, dojox.fx.flip is based on a css border animation :)
Nicola

]]> By: OndraM http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-83 OndraM Tue, 09 Sep 2008 12:53:54 +0000 http://paulbakaus.com/?p=15#comment-83 dojo.fx.flip - WTF!? Is that a canvas/svg trick? dojo.fx.flip – WTF!? Is that a canvas/svg trick?

]]> By: Matthew Congrove http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-82 Matthew Congrove Mon, 08 Sep 2008 22:47:21 +0000 http://paulbakaus.com/?p=15#comment-82 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: <a href="http://i.mydailyphoto.com/login.php" rel="nofollow">http://i.mydailyphoto.com/login.php</a> 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

]]> By: Guillaume Laforge http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-81 Guillaume Laforge Mon, 08 Sep 2008 15:30:03 +0000 http://paulbakaus.com/?p=15#comment-81 It can be neat to use this 3D transform for doing a "cover flow" effect. It can be neat to use this 3D transform for doing a “cover flow” effect.

]]> By: Peter Higgins http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-80 Peter Higgins Mon, 08 Sep 2008 15:19:27 +0000 http://paulbakaus.com/?p=15#comment-80 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 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

]]> By: James Urquhart http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-79 James Urquhart Sun, 31 Aug 2008 10:07:36 +0000 http://paulbakaus.com/?p=15#comment-79 Interesting. I wonder how complex a 3d scene could be made using these transformations. Interesting. I wonder how complex a 3d scene could be made using these transformations.

]]> By: nf http://paulbakaus.com/2008/08/27/3d-css-transforms-on-the-iphone/#comment-78 nf Thu, 28 Aug 2008 02:51:13 +0000 http://paulbakaus.com/?p=15#comment-78 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. 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.

]]>