Efecto rotación + Reflexión

Acabaremos la semana con un tutorial muy útil. Seguramente que casi todos tienen un blog en los que suben avatares, imagenes. Para tenerlos mas elegante y ordenados trataremos hacer el efecto que está en esta preview. ¡Comencemos! 

 Primero nos vamos a plantilla y buscamos el famoso ]]></b:skin> y arriba ponemos:

@keyframes traslade {/*Nombre del frame*/
from,8% { transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { transform: rotateY(60deg);}
32%,40% { transform: rotateY(120deg);}
48%,56% { transform: rotateY(180deg);}
64%,72% { transform: rotateY(240deg);}
80%,88% { transform: rotateY(300deg);}
96%,to { transform: rotateY(360deg);}/*Termina la animacion*/
}
@-webkit-keyframes traslade {/*Nombre del frame Chrome y Safari*/
from,8% { -webkit-transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { -webkit-transform: rotateY(60deg);}
32%,40% { -webkit-transform: rotateY(120deg);}
48%,56% { -webkit-transform: rotateY(180deg);}
64%,72% { -webkit-transform: rotateY(240deg);}
80%,88% { -webkit-transform: rotateY(300deg);}
96%,to { -webkit-transform: rotateY(360deg);}/*Termina la animacion*/
}
@-moz-keyframes traslade {/*Nombre del frame Firefox*/
from,8% { -moz-transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { -moz-transform: rotateY(60deg);}
32%,40% { -moz-transform: rotateY(120deg);}
48%,56% { -moz-transform: rotateY(180deg);}
64%,72% { -moz-transform: rotateY(240deg);}
80%,88% { -moz-transform: rotateY(300deg);}
96%,to { -moz-transform: rotateY(360deg);} /*Termina la animacion*/
}
#traslade {
/*Code para Chrome y Safari*/
-webkit-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/
-webkit-animation-name: traslade; /*Nombre de nuestro frame*/
-webkit-animation-iteration-count: infinite; /*duracion de la animacion*/
/*Code para Firefox*/
-moz-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/
-moz-animation-name: traslade; /*Nombre de nuestro frame*/
-moz-animation-iteration-count: infinite; /*duracion de la animacion*/
/*indicamos el tipo de tranformacion*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 20px auto;
padding: 30px;
width: 200px;
height: 150px;
}
#traslade img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
padding: 5px;
position: absolute;
text-align: center;
width: 180px;/*Tamaño de cada imagen*/
}

.conten-efect-cuatro {
-moz-perspective:700px; /*perspectiva del objeto (Firefox)*/
-webkit-perspective: 700px; /*perspectiva del objeto (Chrome)*/
perspective: 700px;
}

/*posicion que mantiene cada foto*/
#photo-uno {
-webkit-transform: rotateY(0deg) translateZ(200px);
-moz-transform: rotateY(0deg) translateZ(200px);
transform: rotateY(0deg) translateZ(200px);
}
#photo-dos {
-webkit-transform: rotateY(-60deg) translateZ(200px);
-moz-transform: rotateY(-60deg) translateZ(200px);
transform: rotateY(-60deg) translateZ(200px);
}
#photo-tres {
-webkit-transform: rotateY(-120deg) translateZ(200px);
-moz-transform: rotateY(-120deg) translateZ(200px);
transform: rotateY(-120deg) translateZ(200px);
}
#photo-cuatro {
-webkit-transform: rotateY(-180deg) translateZ(200px);
-moz-transform: rotateY(-180deg) translateZ(200px);
transform: rotateY(-180deg) translateZ(200px);
}
#photo-cinco {
-webkit-transform: rotateY(-240deg) translateZ(200px);
-moz-transform: rotateY(-240deg) translateZ(200px);
transform: rotateY(-240deg) translateZ(200px);
}
#photo-seis {
-webkit-transform: rotateY(-300deg) translateZ(200px);
-moz-transform: rotateY(-300deg) translateZ(200px);
transform: rotateY(-300deg) translateZ(200px);
}
/*FIN*/

Un codigo interminable  Pero ya está.

Copia y pega el siguiente codigo en donde desees el efecto:

<div class="conten-efect-cuatro">
<div id="traslade">
<img id="photo-uno" src="img/foto-01.jpg">
<img id="photo-dos" src="img/foto-02.jpg">
<img id="photo-tres" src="img/foto-03.jpg">
<img id="photo-cuatro" src="img/foto-04.jpg">
<img id="photo-cinco" src="img/foto-05.jpg">
<img id="photo-seis" src="img/foto-06.jpg" >
<div style="clear:both"></div>
</div>
</div>

Cualquier duda preguntenme -

Hoy no quiero acabar con mi firma, quiero acabar con este video que les hará pensar.

-REFLEXIÓN-

Personalmente, el video me ha parecido increible. Por favor, veanlo... 

Nos enseña a valorar lo que tenemos, y que no importan las opiniones de los demás.

~ Luis ~