30 de jul de 2013

Efeito Translate


Oi diamantes!
Desculpem não ter postado na sexta-feira, passei o dia todo fora de casa. Alguém ai me dá ideias para post? Acho que estou a ficar novamente com uma crise de inspiração >.<'

Bem, para o post de hoje trouxe um efeito, podem visualizá-lo aqui (www). No efeito a imagem diminui e vai para a direita. Eu sou péssima a dar nomes a efeitos. Se quiserem meter no vosso blog creditem e podem reblogar (com créditos, claro).


Acima de ]]></b:skin> cole:

.efeitotranslate {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(360deg) scale(0.881) skew(1deg) translate(3px);
-webkit-transform: rotate(360deg) scale(0.881) skew(1deg) translate(3px);
-moz-transform: rotate(360deg) scale(0.881) skew(1deg) translate(3px);
-o-transform: rotate(360deg) scale(0.881) skew(1deg) translate(3px);
-ms-transform: rotate(360deg) scale(0.881) skew(1deg) translate(3px);
}
.efeitotranslate:hover{
transform: rotate(360deg) scale(0.434) skew(1deg) translate(233px);
-webkit-transform: rotate(360deg) scale(0.434) skew(1deg) translate(233px);
-moz-transform: rotate(360deg) scale(0.434) skew(1deg) translate(233px);
-o-transform: rotate(360deg) scale(0.434) skew(1deg) translate(233px);
-ms-transform: rotate(360deg) scale(0.434) skew(1deg) translate(233px);
}

Não mude nada. Depois, num gadget html/javascript cole e edite o seguinte código:

<a href="LINK" title="NOME"><img src="IMAGEM" class="efeitotranslate" /></a>

Espero que tenham gostado, até sexta!

8 comentários:

  1. Podes publicar bases já que não é algo habitual.
    Até que gostei do efeito apesar de ser parecido aos efeitos postados anteriormente
    querosabertudo-k.blogspot.com

    ResponderExcluir
  2. O efeito é legal, mas o nome é meio estranho, haha, mas tudo bem. Gostei do efeito :3

    Beijos c: || mygoodies1.blogspot.com

    ResponderExcluir
  3. Gostei do efeito, legal.

    http://paisdeblogueiros.blogspot.com.br/

    ResponderExcluir
  4. Já tinha visto esse tutorial. mas era mais complicado esse aqui é mais facil! beijos; aboutgarota

    ResponderExcluir
  5. Adorei o tutorial :3
    Beijinhos ><

    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tuto, bem facil e bem legal esse efeito ♥
    Beijinhos
    Facebook do blog
    QUER GANHAR UM LINDO COLAR? PARTICIPE DO SORTEIO CLICANDO AQUI
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  7. Oiee! Adoro seus tutorias, sabia?
    Boa semana pra você!
    Beijocas!
    Paloma Viricio.

    P.s.: Tem duas super promoções no blog...dá uma olhadinha e participa!

    ResponderExcluir
  8. Super útil, poderia dá uma passadinha e seguir meu blog? Já sigo o seu *--*
    Beijos vi
    rain-of-shine.blogspot.com.br

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.