Archive for March, 2012

Photo stacks using CSS transforms and box-shadow

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.

Browser support

A quick list of browser support:

  • Firefox 3.6+
  • IE9+
  • 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:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);