3D-ifying Documents Using CSS Transforms

This article was originally posted on the Crocodoc blog. I am reposting here for persistence.

We recently launched a preview of Crocodoc’s newest document to HTML converter. If you haven’t checked it out yet, go play with our preview and see how we’re converting the pages of your documents to embeddable SVG and HTML.

What does the new converter mean to those of you building web applications using Crocodoc? Simple: your documents will load faster, look sharper, and be much easier to customize. Our preview page is full of interactive examples designed to help provide inspiration and showcase what is possible with the new Crocodoc: everything from a 3D page demo, showing off the many layers in a document, to a magnified view of an uploaded document, and a thumbnail that expands into a full-size inline document.

For this post, I’d like to focus on the 3D demo. I’ll explain how it was built, the various issues we ran into, and the workarounds we used to fix them.