Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508711548
Vida do cache: 1508754748
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos CSS Efeitos Imagens

Efeito de animação 3D em imagem com puro CSS3

Graças ao CSS3, podemos criar efeitos e animações incríveis sem necessidade de usar JavaScript.
O uso de Css3 facilita o trabalho de muitos designers.

Uma das características inovadoras em CSS3 é a capacidade de rotacionar elementos, proporcionando um efeito 3D.
Neste artigo irei mostrar como incluir um efeito de rotação 3D em imagem, que ao passar o mouse em cima da imagem, revela um conteúdo.

[dica]Atenção: o resultado deste efeito só funcionará perfeitamente como pretendido em navegadores que suportam transições e animações em CSS3.[/dica]

Para seguir este tutorial, você deve ter no mínimo um conhecimento básico de HTML e CSS, especialmente CSS3.


((Passe o mouse n a imagem abaixo e veja o efeito))


O processo de inserção dos códigos para usar este efeito em imagens é simples. Siga os passos a seguir.

1. Código CSS:

Acesse o painel do blogger, clique no menu “modelo >>Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:


/*Efeito 3D Imagens
-------------------------------------*/
#r3d_container {
position: relative;
width: 300px; /* defina largura padrão da imagem */
height: 250px; /* defina altura padrão da imagem */
margin: 10px auto;
z-index: 1;
}
#r3d_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#r3d_text {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#r3d_container:hover #r3d_text, #r3d_container.hover_effect #r3d_text {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
 -webkit-box-shadow: -5px 5px 5px #aaa;
 -moz-box-shadow: -5px 5px 5px #aaa;
 box-shadow: -5px 5px 5px #aaa;
}
.r3dface {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.r3dface.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
-ms-transform:rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
 color: white;     /*cor do texto*/
  background-color: #aaa;    /*cor de fundo*/
}

2. Código HTML:


<div id="r3d_container" class="hover">
<div id="r3d_text" class="shadow">
<div class="front r3dface">
<img style="width: 300px; height: 250px; display: inline-block;" src="URL-DA-IMAGEM-AQUI"/>
</div>
<div class="back r3dface center">
<p>
ESCREVA SEU TEXTO AQUI.</p>

</div>
</div>
</div>

Não esqueça de incluir as urls das suas imagens.
No código acima o trecho ? width: 300px; height: 250px; ? correspondem a largura e altura da imagem.

Lembrando que o código acima deve ser inserido dentro da postagem a ser publicada, através da aba “editar html” no próprio editor de postagens do Blogger.
Para chamar o efeito em uma imagem é necessário utilize o código html.

Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

46 Comentários

  1. jessica disse:

    como faço para que essas imagens fiquem lado a lado?

  2. Silvio Sabá disse:

    Muito legal essa animação! Será que não tem como fazer para outros navegadores visualizarem?
    Veja como ficou sua dica

  3. Muito interessante, mas o grande mal desses efeitos em nossos blogs é justamente a “bendita” incompatibilidade entre esses códigos nos diferentes navegadores. O público do meu blog ainda é muito grande os usuários do Internet explorer, por isso eu ainda não utilizo CSS3 com grande frequência.

  4. Leonardo disse:

    Excelente dica!!! E só para alertar, SE VOCÊ COLOCAR UM src= DE OUTRA IMAGEM NO LUGAR DO TEXTO DA PARTE POSTERIOR ….VOCÊR TERÁ UM 3D COM DUAS IMAGENS!!!!

  5. jose disse:

    olá tenho um blog em fase de teste , tentei fazer o q vc disse so q não consegui mim ajude.

  6. Mizuki Inoue disse:

    poderia me ajudar…?!
    não funcionou no meu blog ..
    ele é o Travel

    eu entendo uns 40% e fiz tudo direito….tamanho etc…
    mas… se esse tutorial não funciona no Travel.. poderia dar um quefuncione neste templante..?

    obrigada…

    kokoro ni kisu

  7. Boa noite Vanessa, primeiramente parabéns pelo ótimo post e por disponibilizar essa maravilhosa ferramenta em nossos blogs. Só tenho uma dúvida, porque esse efeito não funciona no Internet Explorer? Fique um pouco desanimado quanto a essa deficiência, mesmo sabendo quase ninguém usa mais esse navegador, porem séria bacana se desse certo nele também. No mais obrigado pela atenção e tenha um Feliz 2013 cheio de paz, felicidade e muito dinheiro no bolso rs

  8. R.LIMA disse:

    Olá linda,
    a muito sigo seu Blog desde que era no Blogger e estamos juntos no Grupo @Blogueiros.
    Van, tem como fazer esse código ficar automático aplicando todo ele no html do layout?
    Parabéns pelo blog.

  9. Vanessa, gostaria de saber se ao invés do efeito ser hover, ou seja.. quando o mouse passa por cima do objeto ele muda, seria através de click. Quando clico no objeto, ele muda.

    Aguardo retorno, e adorei o artigo!

  10. Olá, ótima dica, eu queria saber se tem como quando girar aparecer outrra imagem no lugar do texto, ou se tem outro código para fazer isso, quando passar o mouse mudar de imagem com um efeito bacana igual ao desse site.

  11. yaragoth disse:

    Oi, Vanessa!
    Vim aqui justamente atrás desse efeito para inserir num dos meus blogs. Daí deparei com a dita ~largura fixa~ na parte do CSS e me surgiu uma dúvida… será que não tinha como usar o mesmo efeito para imagens de tamanhos diferentes?
    Bom, fui tentar a seguinte artimanha: retirei do código do CSS a parte que especifica largura e altura da imagem. Daí, na hora de inserir o HTML na página em questão, coloquei dentro da primeira div, r3d_container, os valores de width e height da imagem em questão dentro do atributo style. E deu certo! 😀
    Muito obrigada por este excelente tutorial! o/

  12. Parabéns pelos seus tutoriais!
    Estou gostando do seu trabalho com o blog.

    Ainda eu estou apenas passando para ler uns posts, não apliquei ainda nenhuma alteração no blog, pois ele tem a interface mais antiga.
    Mas estou fascinado realmente com a quantidade de digas que vou encontrar aqui!
    Obrigado por compartilhar isso tudo conosco!

  13. Divino Silva disse:

    Parabéns ótimo poster

  14. Danilo disse:

    Olá Vanessa tudo bem? espero que sim eu gostaria de saber se tem como colocar um link nessa imagem tipo deixar a mesma coisa tudo so que quando clicar ir para um link? espero sua resposta bjss

    • Vanessa disse:

      Se vc alterar qualquer coisa nesse sentido, o efeito para de funcionar. Lembre-se que este efeito é apenas para imagens.

  15. Adorei !
    Parabéns pelo blog… beijos 😉

  16. Eduardo disse:

    Oi Vanessa! Após 10 anos afastado do mundo webdesign, estou voltando, aos pouquinhos, sem nenhuma pretensão profissional. Ontem encontrei seu blog e, no meu monitor full hd 24′, encheu os olhos. Um dos mais lindos que já vi! Tem harmonia, conceito, cor, beleza e conteúdo.Parabéns!
    Queria fazer que o lightbox nativo do blogger redimensionasse as imagens em fulscreen ou 200%, mesmo com a perda de qualidade, sem ter que upar uma imagem maior e mais pesada, porém nada encontro na web.

  17. Herlan Santos disse:

    Olá Vanessa.

    Excelente efeito, fica realmente muito elegante.
    Ótimo tutorial.

    Abraço!

  18. Matheus disse:

    Nossa, muito bom Vanessa! :)

  19. Olá, tudo bem? Descobri seu blog por acaso e devo dizer, PARABÉNS!!! É muito bom, tem muita informação para nós que estamos começando, o que é ótimo. Eu adorei seu plano de fundo, como você fez?

  20. Natália disse:

    Oi! Sempre venho aqui e nunca comento, então hoje chegou a hora de agradecer. Se não fosse por vocês, nunca teria personalizado meu blog do meu jeitinho. Às vezes até corrijo erros de temas free que encontro por aí, pode isso?! rs

    Muito obrigada! O que vocês fazem aqui é um baita serviço de utilidade pública.

    Beijo grande =)

  21. RENATO disse:

    Muito bom adorei ja ta no meu site obrigado mundo blogger

  22. MARCOS disse:

    Parabéns, alterei altura e largura da imagem cor de fundo e fonte e mesmo assim ficou perfeito!!

  23. Excelente efeito!!!!!!
    Parabéns pelo trabalho, Vanessa!

  24. das disse:

    Eu adorei!
    E como sempre falo, o modo como você explica as coisas é único: com clareza, praticidade… sem frescura! Adoooro! rsrsrs
    Fica com Deus!
    Das

  25. Mariana disse:

    Que efeito lindo Vanessa, admiro seu talento, parabéns.

  26. Olá Vanessa muito bem seu tutorial apliquei em um Gadget e fico bem
    legal, Você esta de parabéns!

  27. Diego Trilha disse:

    Bem legal esse efeito, gostaria de saber como eu faço para uma imagem ficar girando o tempo todo, sem que seja necessário colocar o cursor sobre ela, obrigado

  28. Alex disse:

    Muito legal Vanessa! Seria muito bom se pudéssemos aumentar as letras do texto atrás das imagens… 😉

    • Vanessa disse:

      O trecho que se refere aos estilos do texto é:
      .r3dface.back
      Vc pode incluir uma linha definindo tamanho da fonte. Inclua: font-size:XXpx;

  29. Isaias disse:

    Muito interessante, Vanessa. O css 3 realmente possui grande utilidade, até jogos podem ser feitos com ele.

  30. sibele disse:

    boa tarde tudo bem?
    Por incrivel que pareça, no firefox eu consegui o efeito já no chrome não, onde errei??

    bjs

  31. Cris Duarte disse:

    Amei e ja estou usando em meu blog, show !!!!!!!!! amo seu blog e seus tutoriais

  32. Taillard disse:

    show de bola!Vi isso em um site de css mas nem imaginava que ficava tao bommm!
    ADOREIIIII!
    Valeu Nessa!

  33. Ótima dica, o efeito é sensacional. Eu irei inserir em um de meus blogs.

    Muito obrigado por compartilhar seus conhecimentos conosco.

  34. Gostei muito desse efeito e estou descobrindo outras possibilidades com as linguagens CSS3 e HTML5.

    Parabéns pelo artigo, está bem fácil de entender.. Estarei aguardando pelo próximo!!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.