Use Reveal.js to Create CSS 3D Slideshow

Use Reveal.js to Create CSS 3D Slideshow

Use Reveal.js to Create CSS 3D Slideshow


If you're making an online presentation to impress your audience, you have to consider to use reveal.js. reveal.js is a CSS 3D Slideshow, it allows you to create a slick and good looking HTML presentation and in the same time utilise the latest web technologies for cool 3D slide transition. Reveal.js is a standalone javascript plugin and doesn't rely on any external libraries.

One thing though, this javascript requires CSS 3D transforms support. That's mean, IE won't able to see all these fancy animation. It works really well in Safari, Chrome and Firefox. Good news is, if CSS 3D support is not detected, it will degrade gracefully and back to the 2D transitions.

If you're a fan Chrome Experiments, Hakim shouldn't be a stranger to you because he has submitted numerous of impressive Chrome Experiments that will blow you away.


  • Navigation Control
  • Support keyboard navigation
  • Progress Bar indicator
  • Built-in Code Syntax Highlighting (highlight.js
  • Slides overview support
  • Multiple Level of Slides, nested slides
  • Unique URL for bookmarking and internal linking
  • Different themes and transitions (Cube, page, concave, box, linear)
  • Support Swipe on touch devices (Not stated in the website but it seems to be working)


reveal.js - overview

reveal.js - nested slide

reveal.js - css 3d transition

reveal.js - syntax highlighting

More Details

  • Official Website / Demo / Download
  • Plugin Category: Layout
  • Requirement: Modern Browsers
  • Compatibility: Required CSS 3D Transform (Fallback to 2D if it's not supported)
  • License: MIT License

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

1 comment

Fri, 20th January 2012
The transition looks very bad for Chrome v16. Animation is not smooth. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!