A CSS 3D Slideshow

Heads Up

reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with support for CSS 3D transforms to see it in its full glory.

- Hakim El Hattab / @hakimel

Vertical Slides

Slides can be nested inside of other slides,
try pressing down.

Basement Level 1

Press down or up to navigate.

Basement Level 2


Basement Level 3

That's it, time to go back up.

Holistic Overview

Press SPACE to enter the slide overview. This allows you to navigate faster in larger decks using the keyboard.

This feature is highly experimental and will be updated to boost performance.

Marvelous Unordered List

Fantastic Ordered List

  1. One is smaller than...
  2. Two is smaller than...
  3. Three!

Clever Quotes

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.

Pretty Code

var supports3DTransforms =['webkitPerspective'] !== undefined ||['MozPerspective'] !== undefined ||['perspective'] !== undefined;

function linkify( selector ) {
    if( supports3DTransforms ) {
        var nodes = document.querySelectorAll( selector );

        for( var i = 0, len = nodes.length; i < len; i++ ) {
            var node = nodes[i];

            if( !node.className || !node.className.match( /roll/g ) ) {
                node.className += ' roll';
                node.innerHTML = '' + node.innerHTML + '';

linkify( 'a' );

Courtesy of highlight.js.

Intergalactic Interconnections

You can link between slides internally,
like this.

Fragmented Views

Hit the next arrow...

... to step through ...

  1. any type
  2. of view
  3. fragments

Spectacular image!

Stellar Links


BY Hakim El Hattab /

Fork me on GitHub