Efecto Abanico de Fotos en álbumes en Google+ algo interesante.

Efecto de Abanico en Albumes de Google+ hecho con CSS3 y HTML5 algo interesante que seria bueno para un proyecto.

El efecto que tiene Google+ le ha gustado a muchos  al ver los albumes de fotos. Al acercar el mouse a un álbum de fotos, este se despliega como un abanico de mano.

Con algunos truquitos en CSS3 que aparentan sencillos se puede hacer veamos este es el codigo .

HTML:

class=»album»>

href=»http://www.Blooglery.com»>

class=»picture»>

class=»picture»>

class=»picture»>

</a>
<figcaption>Cusco Perú
</figure>

CSS:

.album {
display: block;
position: relative;
width: 265px;
height: 215px;
cursor: pointer;
float: left;
}figcaption {
display: block;
position: absolute;
bottom: 0;
text-align: center;
color: #666;
}.picture img {
-webkit-box-shadow: 1px 1px 2px #666;
-moz-box-shadow: 1px 1px 2px #666;
-o-box-shadow: 1px 1px 2px #666;
box-shadow: 1px 1px 2px #666;
background: #F3F3F3;
padding: 4px;
position: absolute;
width: 240px;
height: 180px;
}

/* Selectores por numero: http://css-tricks.com/5452-how-nth-child-works*/
.picture:nth-child(1) img {
z-index: 3;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

.picture:nth-child(2) img {
left: 10px;
z-index: 2;
-webkit-transform: scale(0.97);
-webkit-transition-duration: 0.3s;
-moz-transform: scale(0.97);
-moz-transition-duration: 0.3s;
-o-transform: scale(0.97);
-o-transition-duration: 0.3s;
transform: scale(0.97);
transition-duration: 0.3s;
}

.picture:nth-child(3) img {
left: 20px;
z-index: 1;
-webkit-transition-duration: 0.3s;
-webkit-transform: scale(0.94);
-moz-transition-duration: 0.3s;
-moz-transform: scale(0.94);
-o-transition-duration: 0.3s;
-o-transform: scale(0.94);
transition-duration: 0.3s;
transform: scale(0.94);
}

/*
Este es el efecto
*/
.album:hover .picture:nth-child(1) img {
-webkit-transform: translate(-50px, 0) rotate(-5deg);
-moz-transform: translate(-50px, 0) rotate(-5deg);
-o-transform: translate(-50px, 0) rotate(-5deg);
transform: translate(-50px, 0) rotate(-5deg);
z-index: 6;
}

.album:hover .picture:nth-child(2) img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
z-index: 5;
}

.album:hover .picture:nth-child(3) img {
-webkit-transform:  translate(50px, 0) rotate(5deg);
-moz-transform:  translate(50px, 0) rotate(5deg);
-o-transform:  translate(50px, 0) rotate(5deg);
transform:  translate(50px, 0) rotate(5deg);
z-index: 4;
}

Ver Ejemplo

Compatibilidad

Funciona excelente  en Google Chrome, Mozilla Firefox, Safari y con mínimos bugs en Ópera. Internet Explorer no soporta como siempre un desastre asi que no inventes.

Fuente: Buyacorp