3D Slides Built with HTML5, CSS3, and SVG

I've created a 3D slide deck that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I'll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can 'accordian' open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

You can view the presentation yourself; however, it currently depends on CSS 3D transforms which only work on Safari/Snow Leopard currently. CSS 3D transforms are coming to Firefox 4 and the next version of Chrome though so the features powering this slide deck should be more universal soon. The slides also might take a few seconds to load as they were designed for me to load from my local system rather than over the network, as there are a fair number of images and I haven't optimized things yet.

Whenever you see a blue arrow, you can pres the keyboard arrow keys in the direction indicated and 'dive deeper'. You can also use the keyboard arrow keys to jump through the slides. Press the space bar to zoom in and out of the slides themselves.

See the slide deck here.

In creating the slide deck I wanted to find something that was between being purely linear like Keynote or Powerpoint and completely non-linear like Prezi. I think there's real power in applying this same kind of quasi-3d ability to zoom in and out of topics. You could just create an outline in your presentation tool and have it generate into something like this. I've also realized how powerful HTML5, CSS3, and SVG are, as they can generate almost all the effects of Keynote now and all we need is an authoring tool to generate things in HTML5 (or maybe just convert Keynote files to HTML5/CSS3/SVG)?

The presentation itself is a series of nested HTML5

elements, representing an outline. Sections are animated and positioned using CSS 3D transforms, and the blue arrows are SVG. There are lots of embedded demos and live controls that let you experiment with HTML5, CSS3, and SVG and learn by doing.

For the WebGL demo to work you will have to be using a WebGL capable browser.

The slide deck could be extended in the future to work with gesture events on the iPhone and iPad, and since CSS 3D is hardware-accelerated on those platforms it would be quite fast. It is also pure text, so it is search engine friendly. In addition, it could be made to degrade nicely for older browsers using media queries or other tricks.

I'm continuing to fill out the slide deck, and am available to use it for corporate training sessions, workshops, and presentations at conferences on the new web technologies coming down the pipeline. I'm also looking to join a great startup in San Francisco applying things like HTML5 and real software engineering with JavaScript to enable new kinds of web applications.