This has probably been solved a few different ways elsewhere on the Internet, but thought I’d share a simple photo stack effect I put together using CSS3
transform: rotate(); to rotate each element and
box-shadow to create the effect of them being sat on top of one another.
Here’s a working demo. The CSS is pretty self-explanatory really.
A quick list of browser support:
- Firefox 3.6+
- Chrome 4+
- Safari 4+
- Opera 10+
Older browsers will simply default to the image with a 6px white border. However, if you really want support for older versions of IE then you might consider taking a look at Microsoft’s BasicImage Filter: