Publicidad

Rotar imagen al pasar el cursor con CSS3

Hola otra vez amigos de Ayudar Bloggers en este tutorial, solo les voy a enseñar un efecto para las imagenes, este efecto es Rotar la imagen al paar el cursor, y si, lo haremos con solo CSS3, asi que empezemos:
Clic aqui para ir al demo.

Girar imagen, caballos

Lo primero es irse a Blogger - Su blog- Diseño - Editar HTML, ahi buscan la siguiente linea:
</head>

Y justamente arriba de esa linea, agregan el siguiente codigo css:
<style>
.rotacion {
    -moz-transition: all 2s ease; /*Definimos las transiciones, deben durar 3 segundos*/
    -ms-transition: all 2s ease; /*Definimos las transiciones, deben durar 3 segundos*/
    -o-transition: all 2s ease; /*Definimos las transiciones, deben durar 3 segundos*/
    -webkit-transition: all 2s ease; /*Definimos las transiciones, deben durar 3 segundos*/
    transition: all 2s ease; /*Definimos las transiciones, deben durar 3 segundos*/
}
.rotacion:hover {
    -moz-transform:rotate(-360deg); /*Comenzamos a aplicar el valor rotate de la transormacion*/
    -webkit-transform:rotate(-360deg);
    -o-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    transform:rotate(-360deg);
}
</style> 

Ahi les marco en verde lo que pueden modificar, es solo la velocidad en que dara la vuelta completa, en este caso son Segundos, yo lo deje en 2.
Y ya estan los estilos, ahora para aplica el efecto en una imagen, lo unico que tienen que hacer es agregar el siguiente codigo:
<img class="rotacion" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcMhwL176h50W6TZvCqFos1D_NBc3ndDU3l2JLJ2y2N5RbcRw0A1Zjo1ieRXUpUyAQQpdZwwjk42AcQuYfrXiM9mGdA4YPHyYBGsFt5s7l3KUJyPG1YO-xV7kCiQBmugCQdiu-9sAdzLjO/s1600/caballos.jpg" />

Lo pueden agregar en cualquier parte del blog, para cambiar la imagen, que estoy usando yo, en este caso la de los caballos, cambian la url marcada en color rojo y listo, si el efecto lo quieren agregar en una imagen que ya tenian, solo agreguen lo que esta marcado en azul, ahora si ya tienen este efecto funcionando en su blog, aqui el demo:

El contenido y material publicado así como la asistencia impartida es completamente gratuita. Tu contribución permite que este sitio continue en funcionamiento.
Categorias: ,
Foto de perfiltest:

Soy un joven de 17 años, creador de Ayudar Bloggers y algunos otros blogs, apasionado por el fútbol, la música (rap) pero principalmente el diseño y programación web, mi meta algún día ser uno de los grandes programadores web.

1 comentario:

  1. Acabo de ver la representación de este tutorial en tus posts populares. El efecto es muy fluido y atractivo visualmente.

    ResponderEliminar