Hola,tengo una duda sobre como hacer que un icono o una imagen en si cuando le pongas el curso encima rote/gire sobre si misma y que pare de girar/rotar.
Hola,tengo una duda sobre como hacer que un icono o una imagen en si cuando le pongas el curso encima rote/gire sobre si misma y que pare de girar/rotar.
Y por que es que lo que te paso tomi no te sirve?
.giro img { -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .giro img:hover { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
Y luego puedes encerrar todo , en un div con la class css, algo como:
<div class="giro"> {| cellspacing=2 cellpadding=2 width="100%" style="border:0px solid orange; float:center;" |- |<center>{{BNov}}</center> <center>'''[[:Category:Novedades|Novedades]]'''</center> |<center>{{BPersonajes}}</center> <center>'''[[:Category:Personajes|Personajes]]'''</center> |<center>{{BPlace}}</center> <center>'''[[:Category:Lugares|Lugares]]'''</center> |<center>{{BGames}}</center> <center>'''[[:Category:MiniJuegos|MiniJuegos]]'''</center> |<center>{{BPet}}</center> <center>'''[[:Category:Mascotas|Mascotas]]'''</center> |} </div>
ok,probare
Nop tienes que cambiar algo.
Hay muchas imágenes, la solución es creo que encierres en el div la imagen en la plantilla principal.
{| style="background align="center" width="1%" style="background-color: #ffd200; border:0px solid #1FA1EF; -moz-border-radius:1px; -webkit-border-radius: 9px;" |<div class="giro">[[{{{image|Archivo:logo.png}}}|center|{{{imagesize|120px}}}|link={{{lugar de envio|Link}}}]]</div> |} <noinclude>[[Category:Plantillas|{{PAGENAME}}]]</noinclude>
yo puse en el css esto:
.giro img { -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .giro img:hover { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
y en la plantilla de main puse esto:
<div class="giro">---- {| cellspacing=2 cellpadding=2 width="100%" style="border:0px solid orange; float:center;"|-<div class="giro"> {| cellspacing=2 cellpadding=2 width="100%" style="border:0px solid orange; float:center;"|-|<center>{{BNov}}</center> <center>'''[[:Category:Novedades|Novedades]]'''</center>|<center>{{BPersonajes}}</center> <center>'''[[:Category:Personajes|Personajes]]'''</center>|<center>{{BPlace}}</center> <center>'''[[:Category:Lugares|Lugares]]'''</center>|<center>{{BGames}}</center><center>'''[[:Category:MiniJuegos|MiniJuegos]]'''</center>| <center>{{BPet}}</center> <center>'''[[:Category:Mascotas|Mascotas]]'''</center>|}</div>---- </div>
y no gira cuando pongo el cursor encima del icono/imagen
este es el main de la pagina:
Lo mejor es que lo cambies en esta plantilla. http://es.mundogaturro.wikia.com/wiki/Plantilla:PortadaBoton?action=edit
Yo ya lo probe y funciona correctamente, recuerda que el cache se debe actualizar, pero en la Plantilla:Main no puedes ponerlo porque hace girar muchas cosas xD
No creo que haga falta que hagas nada mas, fijate en la portada.
http://es.mundogaturro.wikia.com/wiki/MundoGaturro_Wiki?action=purge
Ya los iconos giran correctamente n.n