Efecto de Inclinacion animada de Texto en Blogger

Esta vez  aprenderemos como añadir un efecto de inclinación a los Textos de las entradas de nuestro Blog, el mismo que le dará un toque de frescura al Blog.Lo que vamos a realizar es que la imagen de un pequeño giro , cuando nuestros lectores pase el cursor sobre la misma.

Se vería así:

BIENVENIDOS ......

Én este un  truco, todo lo que vamos a hacer es girar el texto un poco cuando el usuario desplaza el cursor del mouse sobre el. El resultado es una ilusión básica, pero la diversión de un texto  que cuelga torcido.

Empecemos entramos a Plantilla / Editar HTML
Buscamos el siguiente codigo:  ]]></b:skin>
Copiamos  y pegamos  el siguiente codigo antes de ]]></b:skin>



<style>/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}</style>


Luego usamos la siguiente etiqueta para aplicar el efecto de inclinacion en nuestros textos.


<div class="tilt pic">
Aqui poner el texto
</div>

Guardamos cambios y ya esta.