Go ahead, take a look :D Visit http://tinyurl.com/iphonevr on your iPhone or iPod Touch.

The images used for the panorama are taken from one of the QuickTime VR movies in Apple’s Cubic VR gallery. I extracted the images from the movie using the procedure explained here (in French, but it’s easy to follow).

I may write a full tutorial on this eventually, but for now I will just share a few notes (and the source code):

• It’s a lot easier to get the 3-d transforms right if the elements you want to transform start out centred in their containing block (so that they start at (0, 0, 0), essentially). I did this with regular CSS, but I suppose this could also be done as part of the transform.
• The above also applies (especially) to any DIV that contains nothing but other DIVs. At first my cube was spinning around its top edge, instead of its centre, because its children (the cube faces) were absolute-positioned, and thus the “cube” DIV itself had no height! Giving it an explicit width and height solved this.
• Touch events on 3-D transformed elements seemed to be little bit unreliable. I worked around this by putting a normal transparent DIV on top of the whole thing and listened to events on that instead.

Download the source code (MIT Licence).

Due to MySpace’s generally crappy HTML, any CSS layouts have to use stupid selectors like table table table td.text table table div { whatever }. Insanity! See this great post for more insight on MySpace layout nuttiness.

Anyway, it appears that some MySpace layouts are targetting something inside some div that happens to also match my pet code, which itself lives inside a div. These selectors tend to aim to hide whatever it is they’re targetting with display: none or visibility: hidden. This means that my pets turn invisible too! Argh.

I’m not sure what to do about this exactly, except maybe go back to table-based code, or pepper inline style attributes everywhere. Or put everything inside a form, just to be perverse :P