I think just about everyone one of us has thumbnailed a PDF at some point, to provide a more visual representation of the PDF for download. You grab a screen shot of the first page, or extract it in photo shop, and you have a nifty little thumbnail that offers a preview of the PDF.
What if we could make those preview thumbnails a bit more appealing? Say, for example to look a little bit more like a book. Or provide some pop by applying a 3d transformation?
With the new CSS3 3D transforms module, we can! But, before you get too excited, I should forewarn that this module is, at time of posting, only in Working Draft status. Which means that it hasn't been finalized, and browser support is limited. The styles I'm about to describe are currently only available in Webkit browsers (Safari, Chrome), but I think we can expect more widespread support in the near-future.
The good news though, is that these styles will simply be ignored by non-supporting browsers.
For our example, see the image below.
Now, have a look at this image, which has some style applied to it with CSS only.
Does it look exactly like a book, no, but pretty cool right?!
The HTML
<div>
<img src="word.png" />
</div>
The CSS
div { -webkit-perspective: 1200;
-webkit-perspective-origin: 50% -50%;
}
div img { -webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(55deg);
-webkit-box-shadow: 0px -1px 4px 4px #333,
-2px -3px 4px 5px #555,
-4px -5px 4px 4px #777,
-6px -7px 4px 3px #999,
-8px -9px 4px 2px #bbb;
}