Efectos para el Blog, imágenes Giratorias

Hace unos días, implante un nuevo diseño al blog, tarde un poco en crear los efectos y demás artilugios que use, si puedes notar, en mi cabecera, mas específicamente en mi logo, tengo las "o" girando constantemente, pues bien, ese es el gatillo del tema de esta entrada, te mostrare como poner efectos de giro o rotación en las imágenes del blog. Esto se puede aplicar a otras cosas, no necesariamente imágenes.

Los efectos los hacemos fácilmente haciendo uso de CSS, para esto usaremos keyframes y transform:rotate, por supuesto explicare como implementarlas para blogs de blogger, no siendo mas te dejo los ejemplos para que implementes los que quieras.

Rotación al pasar el cursor

Al pasar el ratón sobre la imagen esta girara en 360 grados

Para que se aplique a todas las imágenes en las entradas del blog, ve a Personalizar, Avanzado, Añadir CSS pega el código y guarda, o si no ve Plantilla, Editar HTML busca ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.

.post-body img:hover {
-webkit-transform: rotate(360deg); /* Rotacion */
-moz-transform: rotate(360deg);
transform: rotate(360deg);
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}

Puede jugar con el tiempo en que tarde en girar cambiando lo que esta en color verde . Si lo que quieres es poner este efecto pero solo para alguna imagen en particular, entonces lo que tienes que hacer es usar este código junto al anterior:

<img class="imagen1" src="URL de la imagen" />
<style>Aqui pega el codigo anterior</style>

Solo cambia lo que esta en color anaranjado por lo de color morado.

Ahora si queremos que al quitar el raton, la imagen se devuelva como en la siguiente, en vez del primer código agregamos este en su lugar:

.post-body img {
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}
.post-body img:hover {
-webkit-transform: rotate(360deg); /* Rotacion */
-moz-transform: rotate(360deg);
transform: rotate(360deg);
transition:all 0.7s ease-out; /* Tiempo que tarda en girar */
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
}

Puedes hacer que en vez de girar hacia la derecha gire hacia la izquierda, cambiando 360deg por -360deg.

Igualmente puedes cambiar este valor para que la imagen no gire en su totalidad si no un poco, colocando por ejemplo 60deg tendremos:

El efecto de rotación es vistoso, pero con esa forma cuadrada se ve un poco raro, si quieres puedes redondear los bordes, solo agrega justo despues de .post-body img { el siguiente código:

border-radius:150px;

Efecto de rotación continua

Para seguir, ahora haremos que la imagen gire eternamente sin tener que pasar el cursor sobre ella si quieres el efecto solo agrega este código:

.post-body img {
-webkit-animation:spin 6s infinite linear; /* Animación y Tiempo que tarda en girar */
-moz-animation:spin 6s infinite linear;
animation:spin 6s infinite linear;
}
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(360deg)}
    to {-webkit-transform:rotate(0deg)}
}
@-moz-keyframes spin {
    from {-moz-transform:rotate(360deg)}
    to {-moz-transform:rotate(0deg)}
}
@keyframes spin {
    from {transform:rotate(360deg)}
    to {transform:rotate(0deg)}
}

Lo que esta en color verde es la velocidad, mejor dicho, el tiempo que tarda en dar una vuelta, puede hacer que sea mas rápido o mas lento cambiado el valor, lo que esta en color morado da la dirección, si quieres que gire hacia la izquierda intercambia los 360deg y 0deg.

Lo mas probable es que queramos poner este efecto pero solo para alguna imagen en particular,  pues no me imagino todas las imágenes girando continuamente, entonces lo que tenemos que hacer es usar este código junto al anterior:

<img class="imagen1" src="URL de la imagen" />
<style>Aqui pega el codigo anterior</style>

Simplemente reemplazando lo que esta en color naranja por lo de violeta.

A lo demás podemos hacerle que al pasar el cursor se detenga agregando el siguiente código:

.post-body img:hover{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}