slider

C-box ¿Alguna duda?
Aqui va el código de tu c-box

Top comentaristas

sábado, 8 de junio de 2013

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 ~


15 comentarios:

  1. Me he quedado sin palabras tras ver el vídeo. Como tu has dicho, increíble. Lo más importante es el como es una persona por dentro. Da igual como sea por fuera o que problema tenga. Sería todo mucho mejor, si nos damos cuentas de estas cosas, antes de que sea demasiado tarde.

    Me ha sorprendido que sea un anuncio de seguros de vida. Saben tocar la vena sensible.

    No he entendido el efecto de la imagen. ¿La imagen se voltea siempre, pongas o no pongas la flecha encima?

    ResponderEliminar
    Respuestas
    1. Si es verdad, muchas gracias por comentar :D La imagen se voltea siempre, es lo malo >n<

      Eliminar
  2. ohh luis gracias por la tutorial!
    se ve que te exmeras!
    saludos

    ResponderEliminar
  3. gracias estaaaaaaaaa maravilloso me encantan tus tutos *u*

    ResponderEliminar
  4. ohh luis me dejaste en mi blog este commet:

    oye, a ti tambien te paso lo mismo que a mi blog D= Mi sidebar se fue abajo y los comentarios me quedaron mal... TT.TT No se que hacer :(

    realmente no se a que te refrieres!!!
    ojala puedas explicarme en mi blog!

    ResponderEliminar
  5. el efecto esta demasiado geniall!!!!, el video dios lo habia visto y buta que llore con el realmente es un video muy triste u.u

    ResponderEliminar
    Respuestas
    1. Si, es verdad jejeje da pena :( Me alegro que te gustara!

      Eliminar
  6. Esta muy bueno el efecto *O* y el video me saco lagrimas ;u; muy lindo :3

    Saludos y se me cuida!!

    ResponderEliminar
  7. Muy bueno el efecto :33 el video no lo puedo ver porque estoy en clases xD, pero ya lo veré.

    ResponderEliminar

Tutoriales Recursos
Descargas Afiliados
Afilianos Reflexiones
Dibujo Historias