Imagem giratória

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

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.

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.

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.

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.

Imagem giratória

Imagem giratória

Re: Imagem giratória

Re: Imagem giratória

Re: Imagem giratória

Re: Imagem giratória