iPhone VR: Viewing 3D panoramas in Safari using JavaScript and -webkit-transform

October 13th, 2008 § 4 comments § permalink

Apple’s 2.0 iPhone update brought some interesting enhancements to Mobile Safari, including 3-D perspective and access to multitouch events. Armed with the documentation (of varying quality) from Apple’s Web Apps Dev Centre, and invaluable information from blog articles such as Idean’s “Spin the Bottle”, SitePen’s “Touching and Gesturing on the iPhone” and Paul Bakaus’s “3D CSS Transforms on the iPhone”, I put together a simple web app that displays a cubic panorama in Mobile Safari. Look left, right, up and down by dragging your finger across the display. No zoom, currently, though. It was pretty straightforward, but I did learn a few things while creating it.

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).

MySpace layouts are a pain

March 2nd, 2007 § 2 comments § permalink

It seems that my new div-based pet codes are sometimes not showing up on some people’s layouts. Why not?

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

Where Am I?

You are currently browsing the CSS category at bunnyhero dev.