Galería de fotos polaroid, sólo usando CSS 3

Viendo la galería de fotos con estilo polaroid que han creado en el blog de Tutorialzine, la cual utiliza jQuery y un mínimo CSS3, que es una sombra "box-shadow" y una rotación que utiliza "-webkit-transform".
Así hemos creado una galería de fotos similar pero que únicamente utiliza CSS 3, pero aplicando las diferentes opciones que permite este.

El código XHTML creado, únicamente consta de una lista de imágenes (ul > li) con su respectivo pie de imagen:

    

        Globos
    
    

        Coche
    
    

        Niebla
    
    

        Molino de viento
    
    

        Bosque
    

La hoja de estilos, la teneis aquí, en ella, lo más destacable es:
Por un lado, tenemos el contenedor de todas las imágenes (UL), al cual le aplicamos un gradiente de fondo utilizando "-webkit-gradient" en la propiedad "background" del elemento. Aplicamos un gradiente circular o radial con una posición y tamaño, que va de un gris más oscuro, a un gris más claro.

ul.thumb {
   position: relative;
   list-style: none;
   background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#555), to(#222)) !important;
   background: #666;
}

También tenemos el posicionamiento y la rotación que damos a cada LI, con su respectiva imagen y texto. Posicionamos el elemento centrado tanto en altura como en anchura, lo redimensionamos y le aplicamos sombra, además, es importante tener en cuenta que este elemento tiene un efecto "ease-in-out" en el "-webkit-transition" con una duración de 3 segundos, es el que hace que en WebKit, se amplien y reduzcan con el efecto de zoom . Además, con el selector ":nth-child()", cambiamos la posición y giramos cada imagen, además de aplicar a cada imagen una sombra.

ul.thumb li {
   position: absolute;
   top: 50%;
   left: 50%;
   padding: 6px 6px 24px 6px;
   background: #FFF;
   width: 150px;
   height: 130px;
   -moz-box-shadow:1px 1px 6px #222;
   -webkit-box-shadow:1px 1px 6px #222;
   box-shadow:1px 1px 6px #222;
   -webkit-transition: all 3s ease-in-out;
   z-index: 0;
}
ul.thumb li img {
   width: 100%;
   height: 100%;
}
ul.thumb li:nth-child(1) {
   margin-top: -130px;
   margin-left: -130px;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
}

Para terminar, también es muy destacable el estilo que aplicamos al estado ":hover" de cada imagen, en este, utilizamos "-webkit-transform" para cambiar la rotación y poner la imagen completamente horizontal:

ul.thumb li:hover{
   font-size: 1.3em;
   z-index: 10;
   width: 480px;
   height: 322px;
   margin-top: -151px;
   margin-left: -240px;
   -moz-box-shadow:8px 8px 24px #111;
   -webkit-box-shadow:8px 8px 24px #111;
   box-shadow:8px 8px 24px #111;
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

La galería de fotos podeis visualizarla aquí y es únicamente funcional desde FireFox 3.5 (no veremos efecto de ampliación alguno) y desde navegadores utilizando últimas versiones de WebKit, como por ejemplo Safari y Google Chrome (en estos, el efecto de ampliación funciona gracias a -webkit-transition).

La razón por la que no funcionará en Internet Explorer (cualquier versión), es que este, ni en su última versión cumple con el estandar CSS 3, por ejemplo, el selector :nth-child(N) no es reconocido por IE.