Imagem giratória Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Imagem giratória

3 participantes

Ir para baixo

Tópico resolvido Imagem giratória

Mensagem por Alcatra 28.12.12 20:17

Qual é minha questão:
Olá,

Através do Código 01 é possível fazer com que uma imagem gire ao passar o mouse sobre ela. Entretanto o código fica ativo apenas enquanto o mouse está acima dela, ao sair a rotação para no exato momento e volta a sua forma original. Gostaria de saber se é possível fazer com que a rotação seja ativa com a passagem do mouse e permaneça mesmo se este sair, voltando a sua forma eventualmente.

Codes:
Código 01:
Código:
.classe {-webkit-transition-duration: 1.2s}
.classe:hover {-webkit-transform: rotate(360deg)}


Endereço do meu fórum:
http://alcatratestando.forumeiros.com

Versão do fórum:
PHPBB2
Alcatra
Alcatra
*

Membro desde : 19/12/2012
Mensagens : 32
Pontos : 62

http://alcatratestando.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem giratória

Mensagem por Holmes 28.12.12 20:31

Saudações,

Deixe esse CSS:
.classe{-webkit-transition-duration:1.2s}

Use esse Javascript em todas as páginas:
jQuery('.classe').hover(function(){jQuery(this).css('-webkit-transform','rotate(360deg)')})

Assombrosamente.
Holmes
Holmes
****

Membro desde : 11/11/2012
Mensagens : 303
Pontos : 413

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem giratória

Mensagem por Consolado 28.12.12 21:05

Olá!

Experimente esse código:
Código:
classe:hover{-webkit-transform: rotate(1800deg) scale(1); -moz-transform: rotate(1800deg) scale(1); -o-transform: rotate(1800deg) scale(1)}

classe{-webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out}
Melhores cumprimentos.
Consolado
Consolado
Hiper Membro

Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem giratória

Mensagem por Alcatra 28.12.12 22:12

Embora o código do Holmes tenha apresentado alguns defeitos, o do Today não apresentou muitas mudanças. A animação da rotação continua parando e retrocedendo toda vez que o mouse sai de cima da imagem (efeito hover), ao invés de continuar. De toda forma agradeço a ajuda, atenção e paciência.
Alcatra
Alcatra
*

Membro desde : 19/12/2012
Mensagens : 32
Pontos : 62

http://alcatratestando.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Imagem giratória

Mensagem por Holmes 28.12.12 22:27

Saudações,

Deixe esse CSS:
.classe{-webkit-transition-duration:1.2s}

Use esse Javascript em todas as páginas:
jQuery('.classe').hover(function(){if(jQuery(this).css('-webkit-transform')!='rotate(360deg)'){jQuery(this).css('-webkit-transform','rotate(360deg)')}})

Assombrosamente.
Holmes
Holmes
****

Membro desde : 11/11/2012
Mensagens : 303
Pontos : 413

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos