Popular channels

Rotación con Css3

Efecto Hover css3

Pagina de donde vi el ejemplo --> zapateria cancun

Que tal amigos del foro hoy les traigo este sencillo efecto css3 hover.

Para los que no saben, los efectos hover, son aquellos que se efectúan al pasar el puntero del mouse sobre el elemento (imagen, enlace, div, párrafo etc) condicionado.

Para que quede claro supongamos que tenemos un párrafo.

hola como estan soy joaquin



y queremos que, cuando se situé el puntero del mouse sobre dicho párrafo cambie de color:

p:hover {color:red;}

bien esto es un efecto hover.

creamos un div en el cual contendra las imagenes.






ahora el sensillo css3

.redes img{
ffloat:left;
display:block;
width: 25px;
margin-right:10px;
transition: transform 2.8s; /// con la propiedad transición se logra el deslice sueca , se le indica que interactuar a de una manera animada con la propiedad trasnform.

A tener en cuenta: La propiedad transition nos ayuda a que este efecto se realice de una forma animada y no de golpe. esto quiere decir que si no la usamos la rotación sera sin animación alguna.


-webkit-transition:-webkit-transform 2.8s; //para safari y chromer
-o-transition: -o-transform 2.8s; //para opera
-moz-transition: -moz-transform 2.8s; // para firefox
}

Aplicamos el hover
.transform:rotate(720deg); //lo que se realiza aquí es la condicional de que cuando se efectúe el hover realizara una rotación de 720 grados
-webkit-transform:-webkit-rotate(720deg);
-moz-transform:-moz-rotate(720deg);;
-o-transform:-o-rotate(720deg);
}



Demo

eso es todo por hoy amigos recuerden siganme por : Facebook Twiiter google+
0
0
0
0No comments yet