07/10/2013

Efeito Girar (Rotacionar) Imagens ao Passar o Mouse usando CSS

É simples fazer a imagem girar quando passamos o mouse sobre ela. Podemos usar códigos CSS para criar um efeito de rotacionar (inclinar) as imagens quando o mouse passa por cima das fotos publicadas no seu blog. Usar o efeito hover (mouse sobre) nas imagens pode dar um bom destaque para seu site e atrair o interesse e atenção das pessoas para seu blog. Afinal sempre lembramos quando vemos alguma coisa diferente ou inesperada.

Passe o mouse sobre a imagem e veja a demonstração do efeito girar imagens com CSS.

Efeito Girar (Rotacionar) Imagens com CSS

O código CSS para colocar o efeito girar imagens no blog é:

img:hover{
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);}

O valor -10deg que aparece repetidas vezes é o grau de rotação da imagem, portanto altere esse numero como desejar, mas todos com o mesmo valor. Um detalhe importante é que na frente do numero tem um sinal de menos então se quiser o movimento para o outro lado apenas apague o sinal.

Você pode colocar os códigos de duas formas, então escolha a que achar mais simples:

Através da pagina editar HTML do Blogger usando o Ctrl F e colocando o código antes de: ]]></b:skin>

Ou usando a pagina Designer do modelo (pagina editar HTML e clique no botão personalizar. Então você tem uma opção para Adicionar CSS personalizado. Veja mais detalhado aqui: Como Inserir Códigos CSS no Blogger.

Além de ser usado no blog completo como mostramos acima você pode, por exemplo, utilizar esse efeito CSS somente nas imagens do Gadget Postagens Populares. Usando o código desta forma:

.populares img:hover{
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);}

Lembramos que esse efeito é somente nas imagens, ou seja, neste caso de personalizar o gadget postagens populares o efeito não aparece ao passar o mouse sobre o link de texto e a imagem somente se moverá quando o mouse estiver sobre ela.

Veja outros efeitos e acessórios para blogs:
Como Colocar Efeito Arco-Íris nos Links do Blog
Como Colocar Imagens e Frases Aleatórias no Blog
Efeito Estrelinhas Coloridas no Mouse

Esperamos que goste desta dica simples para enfeitar seu blog e além destas sugestões você encontrar outras formas para usar essa dica de CSS para usar no blog.
Related Posts with Thumbnails

19 comentários:

  1. Irmao ainda no CSS, eu tenho um menu dropdown na sidebar no meu blog so que eu quero retirar e deixar normal, ja localizei o codigo, mas eai, eu apago esse trecho ou so modifico algo?

    ResponderExcluir
  2. é só para adicionar esse trecho de código. Não precisa apagar nada no seu html

    ResponderExcluir
  3. Bom dia Fabiano, gortaria que me ajudassem e encontrar o MTCN no google adsense, eu Vivo em Moçambique, e o meio de pagamento viavel e usar o West Union. Ja organizei tudo e agora so falta o Mtcn, eu nao estou a consiguir encontra-lo, peço a sua ajuda.

    ResponderExcluir
  4. Sansao veja esses links:

    https://support.google.com/adsense/answer/2850006?ctx=billing&rd=1

    https://support.google.com/adsense/answer/2850006?ctx=billing&rd=1#n5

    Como me inscrever para receber pagamentos pelo Western Union?

    Para receber seus pagamentos via Quick Cash do Western Union, siga estas etapas.

    Faça login em sua conta em www.google.com/adsense.
    Acesse a guia Página inicial e clique em Pagamentos no painel esquerdo.
    Clique em "Adicionar nova forma de pagamento" no cabeçalho "Configurações de pagamento".
    Selecione o botão de opção Western Union .
    Clique em Continuar.
    Verifique se o nome de exibição está correto.
    Clique em Salvar alterações para salvar seu tipo de pagamento.

    ResponderExcluir
  5. Eu coloco o código dentro de um novo gadget feito no layout e NUNCA dá certo.O que devo fazer?

    ResponderExcluir
  6. Eu nao consigo nao gira me ajuda fabiano eu ja tentei no html e tambem no css e eu coloco o mouse na imagem do post popular e ela nao gira por favor me ajuda se quiser olhar:

    http://www.homeofps2games.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. acho que você já resolveu o problema

      entrei no seu blog agora 19:07 e as imagens dos posts estão girando (testei no firefox)

      Excluir
  7. Respostas
    1. acrescente #header-inner no nome do estilo, então em vez de usar o img:hover {....

      use:
      #header-inner img:hover {....


      se não funcionar tente usar o inspecionar elemento do navegador para achar o nome do estilo da imagem do logo do seu blog. (pode ser difirente conforme o template)

      Excluir
    2. Caramba, que massa, me ajudou muito, obrigado mais um participante :-)

      Excluir
    3. Tenho outra dúvida, no meu blog> http://clubpenguindiversaoblog.blogspot.com.br/ a logo do blog, cabeçalho, gira tipo duro, tinha como ser devagar e lento, como na sua postagem a cima?

      Excluir
    4. o código para fazer girar mais lento é
      transition:all .3s;

      só coloque junto com os outros e ajuste o valor .3, que representa 0,3 segundos de transição

      Excluir
    5. que bom que conseguiu fazer o que queria

      Excluir
    6. Fabiano, problema de novo rsrsrs...kkk... poderia me mostrar um exemplo pelo HTMl que passou por que eu troquei -10 por .3 mas, não mudou, em todos fis!

      Excluir
  8. o .3 que falei no outro comentário é sobre a velocidade do efeito (velocidade que a imagem gira)

    o -10 que tem no código é o quanto a imagem girar (gira 10 graus), se colocar 0,3 no lugar vai girar praticamente nada. Lembrando que um giro completo são 360 graus.

    ResponderExcluir