The compelling feature of impress.js is to animate your presentations in a 3D space. Earlier this year I spent some time trying to move from placing my slides in a 2D plane to doing something really cool and 3D. But I never really got beyond some simple tilts and turns, like you see at the end of the official demo as well. Somehow I couldn't figure out the logic of simple rotations around x, y, and z axes.

To get to the bottom of this, led to spending several weeks on doing what 19th century painters would have called "studies". Drawing simple details and figures just to learn how they behave on the canvas. (Yes, the div element that holds your slides in impress.js is actually called the canvas!)

An impress.js 3D study

To try to get a grip on 3D in CSS and in particular in impress.js, I created a simple test: rotated some slides each way, to create a 3-dimensional "plus-sign". I then tried to further rotate this in a second direction, to see what happens. You can step through it below by clicking the "Next..." link:

Open presentation in new window

Ok, so that didn't make any sense.

It led me to read about the math behind CSS 3D transformations and some blogs with nice examples of CSS 3D rotations. But alas, my math skills aren't strong enough to directly say whether there was a bug in impress.js (there wasn't), or whether I was insane, or what was going on here...

The next best thing when you can't grasp a mathematical problem is to use some known-good software to solve it. I found Visual Python to be a simple an accurate 3D rendering library. So I did the same transformations in python, and got this:

Open presentation in new window

Ok, so we've learned that order matters when applying the rotateX/Y/Z functions. In fact, that's exactly what online resources say as well. So now there's some logic to the craziness.

However, impress.js hard codes the order to always be x -> y -> z. Is that ok, or wouldn't it then limit what we can do? Turns out the answer is yes. I did the same 3D study in plain CSS, and it turns out there are rotations that never be reached with impress.js (see the end of that link).

Adding option to specify order of rotations to impress.js

So to relax the limitation of a hard-coded order for rotations, I've now added a new attribute to impress.js core: data-rotate-order. The default of course is still "xyz", but any other permutation of x, y and z is also now possible.

To showcase this new capability, I also added a new presentation, which for the first time really moves in all possible directions in 3D space:

Open presentation in new window

Impressionist sneak peek...

When working with all of the above 3D presentations, I often found it very hard to reason about the 3D space, since impress.js always shows just the current slide, and then quickly navigates between them in transitions. To compose 3D presentations it is much better if you were able to zoom out and watch your presentation as a whole, and also look at it from different angles.

So I've started to work on a new tool to do just that!

Open presentation in new window

You can drag the + o and z buttons to zoom around in the impress.js presentation, and see what it looks like from new angles!

The current state of this new project, which I've christened Impressionist is still on a concept stage, but simply having the ability to navigate a 3D space and look at my presentations from a distance has already been immensely helpful in creating the demo presentations you see above in this blog post. Even just seeing what the well known official impress.js demo looks like was quite a cool feeling!

In the coming months I hope to continue work on this new project so that it could become a proper visual editor for creating stunning impress.js presentations.