I made the rash decision to do the slides for my Wordcamp 2011 presentation using 3D CSS and touch events on an iPad. I felt this was in the spirit of things, since I was talking about mobile theming. I realized, too late to change my mind, that it would be harder than I thought.

The main problem was getting the touch powered buttons to work with the 3D structure. Both of these things, by themselves, are easy to set up. The code I used for my touch powered buttons I mostly just stole from this post by developer Seb Lee-Delisle. The 3D stuff I mostly learned from this article on 24 Ways by David DeSandro.

My plan was to be able to rotate the carousel by touch: just drag it back and forth and have it snap into place. But while tracking the movements of a finger across the screen was easy, taking that value and turning it into degrees of rotation for the carousel was a bit much to have done in time for Wordcamp. So instead I just stuck in some buttons that rotated the carousel by 36 degrees (there are 10 slides, so 360 / 10 = 36.)

The result of this harried, hackish approach is that my slides are pretty buggy. As it turns out, this isn’t such a bad thing; these are easily the most interesting CSS bugs I’ve ever seen:

• If you tap the left and/or right buttons as quickly as you can, the entire carousel gets narrower and narrower. This works with mouse clicks as well>
• The up and down buttons on slides 3, 4, 8 & 9 only respond to taps along their left edges. Mouse clicks work normally. The only thing these slides have in common is that 3 and 8 lie along the same axis, as do 4 and 9 (when viewing slide 3, 8 is directly behind it; when viewing slide 4, 9 is directly behind it.)