11 de out de 2012

Efeito giratório com zoom nas imagens


Oi pessoal! 
Hoje eu vou ensinar mais um efeito de imagens, para vocês colocarem em seus Templates.
O tutorial eu aprendi no Jackie Dream.  Veja um exemplo aqui.
 Para usar o efeito em uma elite de afiliados:

1- Vá no HTML do seu blog, procure por ]]></b:skin>, acima, cole:

.giroezoom {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}
.giroezoom:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}


2- Para usar em uma imagem, use o seguinte código:

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="efeitogiratorio"/></a>

Para usar o efeito em todas as imagens do blog:

 Cole o seguinte código:
.post img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}
.post img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}
Se estiver tudo certo, salve.

4 comentários:

  1. Achei bem legal o efeito *--* Talvez eu use no meu próximo designe do meu blog ^^

    Meu Mundo, Meu Estilo

    ResponderExcluir
  2. Ficou legal mas parece bem difícil de fazer ainda mais com minha intensa briga com a tecnologia rsrs

    bjos

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!