¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL Rotacion en 3D y Keyframe - CSS3
#1
Post 
0
Hola, hoy les enseñare la forma correcta de usar keyframes, una función en css3, en ella podemos crear funciones así como javascript que luego se ejecutaran al ser llamados, la parte mala de esto es que no todos los navegadores lo interpretan Triste por el momento esta propiedad solo se puede apreciar en Google Chrome, Safari y Firefox, además es recomendable tener estos navegadores actualizados a su ultima versión, si van a utilizar lo que mostrare en esta entrada quiero que tomen en cuenta eso Sonrisa muy bien comencemos


Primero vamos con el efecto y luego con el acabado y su explicación.





copia y pega el siguiente código css en donde tengas los estilos de tu web

Código:
@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*/





Bien, terminamos con el Css, ahora Vamos con el HTML.

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>


NOTA : Remplaza lo que esta en Negrita por tu imagen.



El resultado es el siguiente :



CLIC AQUÍ PARA VER DEMO OFICIAL LAGRIHOST








Okay, hemos implementado el keyframe ahora vamos con la explicación :




El efecto visto anteriormente es un frame translade, que pasa de imagen en imagen mostrado la cara de cada una por ves.


tomare como ejemplo la implementación : @keyframes lagrihost { "lagrihost" es el nombre del frame, si ustedes crean uno solo tienen que ponerle un nombre, puede ser el que ustedes quieran, ahora seguiremos con la estructura:

ATENCIÓN ESTO ES SOLO UN EJEMPLO, NO SON IGUALES LAS PROPORCIONES NI PROPIEDADES DEL EFECTO DADO.


Código:
@-moz-keyframes lagrihost { ← el corchete abre nuestro frame
    from {-moz-transform: rotateY(0deg);} ← "from" indica como empiesa la animacion
    to   {-moz-transform: rotateY(-360deg);} ← y "to" indica como terminara
} ← asi como lo abrimos nuestro frame aqui lo cerramos




ahora ya tenemos nuestro keyframe creado, para llamarlo hacemos lo siguiente,


cremos una nueva regla ya sea id o class


Código:
<div class="conten-efect-cuatro"> ← indicamos la Clase mantenida, en este caso "La perspectiva"

<div id="traslade">   ← indicamos el nombre de nuestro keyframe




Bueno espero les allá gustado mi aporte, me llevo tiempo hacer el efecto y la explicación... Espero les guste y le den un uso.
Lo anterior es, probablemente, mi sarcasmo habitual y no refleja en absoluto mi opinión real.
Puedo incluir sutilezas de la rareza, suficiente como para aparecer a los incautos como un galimatías total.


Si te ayude o te gusto mi aporte no te olvides de poner [Imagen: plus_post.png]


[Imagen: b1WJVXP.png]

#2
0
Que excelentes @Wolves y el demo Sorprendido vos enseñando CSS3 que genial Lengua También se pueden hacer iconos con algunos códigos CSS3 cada vez más interesantes. +1
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#3
0
gracias por los aportes amigo, se agradecen
la música nó se escucha con los oídos, sino con el corazón

#4
0
(16-11-2013, 06:59 PM)Sorss escribió: :o Está genial ésto, yo no sabía mucho de CSS3 no quise usarlo porque en algunos navegadores no funcionan, entonces tengo miedo de mi web se vea mal en los navegadores que no funcione, sería así?

Salu2.

Casí la mayoria lo soporte, en el comienzo te dice los navegadores que lo soporta. El explorador que mayormente da problemas en esto es el Internet Explorer.
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#5
0
(16-11-2013, 07:06 PM)Sorss escribió: Ah, capaz lo utilice porque ya la gente no usa IE, usan los navegadores como Chrome, Firefox, Opera, Safari, etc.

Ahora la mayoria usa chrome y firefox así que si te serviria como mencionas Guiño
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#6
0
(16-11-2013, 07:09 PM)Kevinex escribió:
(16-11-2013, 07:06 PM)Sorss escribió: Ah, capaz lo utilice porque ya la gente no usa IE, usan los navegadores como Chrome, Firefox, Opera, Safari, etc.

Ahora la mayoria usa chrome y firefox así que si te serviria como mencionas Guiño

Claro, Un 85 % usa chrome y Mozilla, Los demás se reparten en opera,safari,maxton, etc Guiño
Lo anterior es, probablemente, mi sarcasmo habitual y no refleja en absoluto mi opinión real.
Puedo incluir sutilezas de la rareza, suficiente como para aparecer a los incautos como un galimatías total.


Si te ayude o te gusto mi aporte no te olvides de poner [Imagen: plus_post.png]


[Imagen: b1WJVXP.png]



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Menu horizontal con html5 y css3 torgar22 0 1,908 24-11-2014, 12:03 PM
Último mensaje: torgar22



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018