Wednesday, October 6th, 2010

3D Slides Built with HTML5, CSS3, and SVG

Category: 3D, CSS, HTML, Presentation

Over on my personal blog I talk about a 3D slide deck I’ve created 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.

Read more to learn about the 3D slide deck and how I built it.

Posted by Brad Neuberg at 1:00 am

3.4 rating from 25 votes


Comments feed TrackBack URI

vimeo does not like browser flash blockers on purpose. Their player objects also perform poorly in zoomed windows. (Something about cursor position tracking).

For the sake of simplicity, consider YouTube.

Comment by ddotsenko — October 6, 2010

@ddotsenko: YouTube has bad encoding for tech videos; they over encode the videos which makes the slides unreadable, so I prefer Vimeo for higher quality content.

Comment by Brad Neuberg — October 6, 2010

very cool

Comment by Jesse — October 6, 2010

Leave a comment

You must be logged in to post a comment.