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.

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" />

El contenido y material publicado así como la asistencia impartida es completamente gratuita. Tu contribución permite que este sitio continue en funcionamiento.
Acabo de ver la representación de este tutorial en tus posts populares. El efecto es muy fluido y atractivo visualmente.
ResponderEliminar