Efeitos CSS Efeitos Imagens Vanessa S.
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.
como faço para que essas imagens fiquem lado a lado?
Muito legal essa animação! Será que não tem como fazer para outros navegadores visualizarem?
Veja como ficou sua dica
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.
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!!!!
olá tenho um blog em fase de teste , tentei fazer o q vc disse so q não consegui mim ajude.
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
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
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.
Este efeito é em CSS3 não tem como fazer ficar automático não. Só se fosse com js.
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!
Este efeito é em CSS3 e é apenas do jeito que está ai, não funciona do jeito que vc quer.
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.
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/
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!
Parabéns ótimo poster
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
Se vc alterar qualquer coisa nesse sentido, o efeito para de funcionar. Lembre-se que este efeito é apenas para imagens.
Adorei !
Parabéns pelo blog… beijos 😉
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.
Olá Vanessa.
Excelente efeito, fica realmente muito elegante.
Ótimo tutorial.
Abraço!
Nossa, muito bom Vanessa! 🙂
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?
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 =)
Muito bom adorei ja ta no meu site obrigado mundo blogger
Parabéns, alterei altura e largura da imagem cor de fundo e fonte e mesmo assim ficou perfeito!!
Fico feliz que tenha dado certo 🙂
Excelente efeito!!!!!!
Parabéns pelo trabalho, Vanessa!
Obrigada pelo comentário 😉
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
Oi Dani, saudades 🙂
Que bom que vc gostou *_*
Que efeito lindo Vanessa, admiro seu talento, parabéns.
Olá Vanessa muito bem seu tutorial apliquei em um Gadget e fico bem
legal, Você esta de parabéns!
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
O efeito deste hack é esse que está ai..se existe uma outra forma, eu desconheço.
Muito legal Vanessa! Seria muito bom se pudéssemos aumentar as letras do texto atrás das imagens… 😉
O trecho que se refere aos estilos do texto é:
.r3dface.back
Vc pode incluir uma linha definindo tamanho da fonte. Inclua: font-size:XXpx;
Muito interessante, Vanessa. O css 3 realmente possui grande utilidade, até jogos podem ser feitos com ele.
boa tarde tudo bem?
Por incrivel que pareça, no firefox eu consegui o efeito já no chrome não, onde errei??
bjs
Amei e ja estou usando em meu blog, show !!!!!!!!! amo seu blog e seus tutoriais
Que bom que gostou. Obrigada pelo comentário 😉
show de bola!Vi isso em um site de css mas nem imaginava que ficava tao bommm!
ADOREIIIII!
Valeu Nessa!
Eu ando “encantada” pelo css3 ultimamente…rs
Ótima dica, o efeito é sensacional. Eu irei inserir em um de meus blogs.
Muito obrigado por compartilhar seus conhecimentos conosco.
Que bom que gostou 🙂
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!!
Os efeitos proporcionados pelo uso de CSS3 são incríveis mesmo.Eu adoro