Imagem giratória

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Imagem giratória

Mensagem por Alcatra em Sex 28 Dez 2012 - 18: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
avatar

Alcatra
Nível 4

Masculino
Inscrito dia : 19/12/2012
Mensagens : 32
Pontos Ativos : 62

Ver perfil do usuário http://alcatratestando.forumeiros.com/

Resolvido Re: Imagem giratória

Mensagem por Holmes em Sex 28 Dez 2012 - 18: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.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Imagem giratória

Mensagem por Consolado em Sex 28 Dez 2012 - 19: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.
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Imagem giratória

Mensagem por Alcatra em Sex 28 Dez 2012 - 20: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.
avatar

Alcatra
Nível 4

Masculino
Inscrito dia : 19/12/2012
Mensagens : 32
Pontos Ativos : 62

Ver perfil do usuário http://alcatratestando.forumeiros.com/

Resolvido Re: Imagem giratória

Mensagem por Holmes em Sex 28 Dez 2012 - 20: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.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum