Efeito Rotate // Exclusivo!!


Vocês não leram errado. O efeito é exclusivo! Eu ia trazer um menu, mas trabalhar com efeitos para imagens é muito melhor, convenhamos. O efeito ficou lindo, na minha opinião. No começo deu super errado, mas fui dando uma pesquisada, achei vários tutoriais e sites que ajudam muuito nisso e fiz alguns.

Mas vamos ao efeito, não? Ele chama-se Rotate porque, bem, ele roda e cresce. Não sei ao certo se esse realmente seria o nome do efeito, mas vai ficar assim mesmo porque está bom e tem bastante haver com o próprio efeito. Se quiser vê-lo, clique aqui.

Para fazer o efeito funcionar, vá em Modelo > Editar HTML. Expanda a primeira "seta". Dê CTRL + F e procure por ]]>b:skin. Acima dessa tag, cole:

.rotate {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.rotate:hover {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(360deg) scale(1.201) skew(1deg) translate(2px);
-webkit-transform: rotate(360deg) scale(1.201) skew(1deg) translate(2px);
-moz-transform: rotate(360deg) scale(1.201) skew(1deg) translate(2px);
-o-transform: rotate(360deg) scale(1.201) skew(1deg) translate(2px);
-ms-transform: rotate(360deg) scale(1.201) skew(1deg) translate(2px);
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Caso não queira a borda arredondada, apague as partes destacadas em negrito. Agora, prosseguindo com o tutorial: Vá em Layout > Adicionar um gadget > HTML/Javascript, nele cole esse código:
Clique aqui e veja o código.

Repita o código até alcançar o número de imagens desejadas.

 Os blogs e sites que ajudaram-me na construção deste foram: xxx xxx xxx ~guardando os links~
/Ana

10 comentários:

  1. Que lindinho! Não sei fazer efeitos muito bem, vou usar esse no Próximo Layout ou se tiver tempo e paciência nesse!

    Beijos>>SEMPRE FUI ESTRANHA

    ResponderExcluir
  2. Adorei esse efeito, vou usá-lo :3

    Beijo <3

    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
  3. Amei o efeito, com certeza vou usar.
    Seu blog é perfeito já estou seguindo.
    Beijos | html-secrets.blogspot.com

    ResponderExcluir
  4. Lindo o efeito *3*
    Seguindo ~
    - Tools For You

    ResponderExcluir
  5. ótimo efeito :3
    diary-nerd.blogspot.com.br

    ResponderExcluir