IT occurred to me that the use of CSS parallax could be put to good use for pop-up book effects.

So I threw together a demo using a lot of "transform:" styling on the various elements. Wall and ceilings have 3D rotations applied to them, and pretty much all content is somewhat pushed back away from the screen with "transform: translateZ(...)".

Neon labels are styled via EnjoyCSS, and some parallax structure was based on Keith Clark's parallax scroll demo #3.

Albrecht Durer's prints for Dante's Divine Comedy serve as base material as we take an elevator ride down into the bowels of hell.


(There are a lot of images on this page (since every layer is a different image), so it may take a while to load.)

Limbo

1st Circle: Philosophers and virtuous pagans

Lust

2nd Circle

Gluttony

3rd Circle

Greed

4th Circle

Wrath

5th Circle

Heresy

6th Circle

Violence

7th Circle

Fraud

8th Circle

Treachery

9th Circle: Satan, frozen depths