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 ~

Efecto de imagen aclarar/oscurecer

¡Hola! Aqui yo, reflexionando sobre la vida, la amistad...  Me pasan cosas muy raras... sera la pubertad (ok no xD) bueno, en este tuto os enseñare a hacer un efecto en las imagenes del blog en las que al pasar el ratón, la imagen se aclara o oscurece.

 Vamos a Edicion de HTML y antes de ]]></b:skin> pegamos esto:

img, a img {
border: 0px;
opacity: 100;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
border-radius: 10px;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
}
img:hover, a:hover img {
opacity: .70;
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
border-radius: 10px;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1.5s linear;
}

Si quieres que las imagenes sean mas claras en estado normal baja el numero 100 y si quieres que al pasar el ratón sea mas oscuro o claro aumenta o disminuye el numero 70. El border-radius son los bordes de las imágenes