This is 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. Watch a video of it in action:
The deck itself is teaches HTML5, CSS3, and SVG in a non-linear way; the presenter and those following the presentation can choose how deep or shallow to go on the topics. The goal for the slide deck is 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, Chrome, and Firefox on desktop machines.
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; note that it will take a few seconds to load as the entire deck loads into memory for performance:
The slide deck is something between being purely linear like Keynote or Powerpoint and completely non-linear like Prezi.
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.