Rotacion en 3D y Keyframe - CSS3

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 :( 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 :) muy bien comencemos

Efecto 1

Podemos hacer rotar objetos de forma infinita atravez de Keyframe y utilizando la propiedad "animation-iteration-count"

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

@keyframes girar { /*ponemos un nombre al frame*/
    from {transform: rotateY(0deg);}/*Empiesa la animacion*/
    to   {transform: rotateY(-360deg);}/*Termina la animacion*/
}

@-moz-keyframes girar { /*ponemos un nombre al frame (Firefox)*/
    from {-moz-transform: rotateY(0deg);}/*Empiesa la animacion*/
    to   {-moz-transform: rotateY(-360deg);}/*Termina la animacion*/
}

@-webkit-keyframes girar { /*ponemos un nombre al frame (Chrome)*/
    from {-webkit-transform: rotateY(0deg);}/*Empiesa la animacion*/
    to   {-webkit-transform: rotateY(-360deg);}/*Termina la animacion*/
}

#girar {
    /*Code para Chrome y Safari*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s; /*tiempo de ejecucion*/
    -webkit-animation-name: girar; /*Indicamos el nombre de nuestro frame*/
    -webkit-animation-iteration-count: infinite; /*duracion de la animacion*/
   /*Code para Firefox*/
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 3s; /*tiempo de ejecucion*/
    -moz-animation-name: girar; /*Indicamos el 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;
}

#girar {
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 0 auto;
    padding: 5px;
}

.conten-efect {
    margin: 40px auto;
    width: 610px;
}

.conten-object {
    -moz-perspective:700px; /*perspectiva del objeto (Firefox)*/
    -webkit-perspective: 700px; /*perspectiva del objeto (Chrome)*/
    text-align: center;
}

Copia y pega el siguiente código en donde desees el efecto

<div class="conten-efect">
    <div class="conten-object">
        <img id="girar" src="URL de la imagen" />
    </div>
</div>

Lo que acabamos de hacer es crear un frame y le hemos puesto un nombre, tomare como ejemplo la implementación en Firefox: @-moz-keyframes girar { "girar" 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:

@-moz-keyframes girar { ← 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, tambien tomare como ejemplo la implementacion en firefox:

cremos una nueva regla ya sea id o class

#ejemplo {
    -moz-animation-name: girar; ← indicamos el nombre de nuestro keyframe
}

una vez llamado atravez de una regla en css ya solo nos queda aplicarlo en nuestra estructura html que tengamos, como una imagen o un div, asi es como aplicamos keyframe

Efecto 2

Podemos hacer animaciones avanzadas con un poco de imaginación

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

@keyframes traslade-uno {/*ponemos un nombre al frame*/
   from,20% { transform: rotateX(0deg);}/*Empiesa la animacion*/
   30%,40%  { transform: rotateY(90deg);}
   50%,60%  { transform: rotateX(180deg);}
   70%,80%     { transform: rotateY(270deg);}
   90%,to    { transform: rotateX(360deg);}/*Termina la animacion*/
}

@-webkit-keyframes traslade-uno {/*ponemos un nombre al frame (Chrome)*/
   from,20% { -webkit-transform: rotateX(0deg);}/*Empiesa la animacion*/
   30%,40%  { -webkit-transform: rotateY(90deg);}
   50%,60%  { -webkit-transform: rotateX(180deg);}
   70%,80%     { -webkit-transform: rotateY(270deg);}
   90%,to    { -webkit-transform: rotateX(360deg);}/*Termina la animacion*/
}

@-moz-keyframes traslade-uno {/*ponemos un nombre al frame (Firefox)*/
   from,20% { -moz-transform: rotateX(0deg);}/*Empiesa la animacion*/
   30%,40%  { -moz-transform: rotateY(90deg);}
   50%,60%  { -moz-transform: rotateX(180deg);}
   70%,80%     { -moz-transform: rotateY(270deg);}
   90%,to    { -moz-transform: rotateX(360deg);}/*Termina la animacion*/
}

#traslade-uno {
    /*Code para Chrome y Safari*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s; /*tiempo de ejecucion*/
    -webkit-animation-name: traslade-uno; /*Indicamos el nombre de nuestro frame*/
    -webkit-animation-iteration-count: infinite; /*duracion de la animacion*/
    /*Code para Firefox*/
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 3s; /*tiempo de ejecucion*/
    -moz-animation-name: traslade-uno; /*Indicamos el nombre de nuestro frame*/
    -moz-animation-iteration-count: infinite; /*duracion de la animacion*/
}

#traslade-uno {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 5px;
    padding: 5px;
}

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

Copia y pega el siguiente código en donde desees el efecto

<div class="conten-efect-dos">
    <img id="traslade-uno" src="URL de la imagen">
    <img id="traslade-uno" src="URL de la imagen">
</div>

 En esta ocasión nos hemos dado cuenta de que la estructura del keyframe a cambiado, explicare porque, como ya sabemos "from" y "to" indican el principio y el fin de nuestra animación, lo cual solo nos da opción de especificar la propiedad que queremos usar para el principio de nuestra animación y la que queremos usar para el final, si deseamos que tenga mas efectos solo alteramos el código utilizando porcentajes del 1% al 100%, podemos especificar el tiempo que tardara en llegar a cada parte del código:

@-moz-keyframes traslade-uno {
   from,20% { -moz-transform: rotateX(0deg);} ← Se aplicara de from a el 20%
   30%,40%  { -moz-transform: rotateY(90deg);} ← Se aplicara del 30% al 40%
   50%,60%  { -moz-transform: rotateX(180deg);} ← Se aplicara del 50% al 60%
   70%,80%     { -moz-transform: rotateY(270deg);} ← Se aplicara del 70% al 80%
   90%,to    { -moz-transform: rotateX(360deg);} ← Se aplicara del 90% hasta el final
}

los valores en porcentaje que utilice para este efecto están escritos de 10 en 10 pero pueden ser cualquier valor aunque hay que tomar en cuenta que dependiendo de cual sea el valor es lo que tardara el efecto en transcurrir





Efecto 3

Podemos jugar con los valores para experimentar nuevos efectos

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

@keyframes traslade-dos {/*ponemos un nombre al frame*/
   from,20% { transform: rotateY(0deg);}/*Empiesa la animacion*/
   30%,40%  { transform: rotateX(90deg);}
   50%,60%  { transform: rotateY(180deg);}
   70%,80%     { transform: rotateX(270deg);}
   90%,to    { transform: rotateY(360deg);}/*Termina la animacion*/
}

@-webkit-keyframes traslade-dos {/*ponemos un nombre al frame (Chrome)*/
   from,20% { -webkit-rantsform: rotateY(0deg);}/*Empiesa la animacion*/
   30%,40%  { -webkit-transform: rotateX(90deg);}
   50%,60%  { -webkit-transform: rotateY(180deg);}
   70%,80%     { -webkit-transform: rotateX(270deg);}
   90%,to    { -webkit-transform: rotateY(360deg);}/*Termina la animacion*/
}

@-moz-keyframes traslade-dos {/*ponemos un nombre al frame (Firefox)*/
   from,20% { -moz-transform: rotateY(0deg);}/*Empiesa la animacion*/
   30%,40%  { -moz-transform: rotateX(90deg);}
   50%,60%  { -moz-transform: rotateY(180deg);}
   70%,80%     { -moz-transform: rotateX(270deg);}
   90%,to    { -moz-transform: rotateY(360deg);}/*Termina la animacion*/
}

#traslade-dos {
    /*Code para Chrome y Safari*/
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 3s; /*tiempo de ejecucion*/
    -webkit-animation-name: traslade-dos; /*Indicamos el nombre de nuestro frame*/
    -webkit-animation-iteration-count: infinite; /*duracion de la animacion*/
    /*Code para Firefox*/
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 3s; /*tiempo de ejecucion*/
    -moz-animation-name: traslade-dos; /*Indicamos el nombre de nuestro frame*/
    -moz-animation-iteration-count: infinite; /*duracion de la animacion*/
}

#traslade-dos {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 5px;
    padding: 5px;
}

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

Copia y pega el siguiente código en donde desees el efecto

<div class="conten-efect-tres">
<img id="traslade-dos" src="URL de la imagen">
<img id="traslade-dos" src="URL de la imagen">
</div>

Efecto 4

Si ya nos hemos acostumbrado y utilizar keyframes podremos crear animaciones aun mas avanzadas para mejorar nuestro sitio web o blog, solo hay que tener imaginación

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente 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*/

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>

Utilice nombres distintos para las reglas en CSS para que en caso de que utilicen uno o mas efectos de esta entrada no haya conflicto alguno.

Espero que les haya gustado y hayan aprendido algo en esta nueva entrada :D, si tienen algún problema, alguna duda o simplemente quieras dar las gracias solo dejame un comentario