16 de jul de 2013

Efeito Skew


Oi diamantes!
Desculpem não ter postado na sexta feira, eu tenho imenso tempo para postar aqui porque estou de férias (até Setembro!) mas não tenho muitas ideias (e a preguiça também tem culpa!). A Milena sugeriu que eu fizesse um efeito no Css 3.0 Maker, eu nunca tinha feito um efeito lá mas gostei muito.

O efeito é simples, no hover a imagem roda e fica em formato de paralelogramo (se não souberem o que é me avisem). Se quiserem ver melhor cliquem. Gostaram?


Se quiser meter, coloque o código acima de ]]></b:skin>

.ddug {
transition:All 0.7248s ease;
-webkit-transition:All 0.7248s ease;
-moz-transition:All 0.7248s ease;
-o-transition:All 0.7248s ease;
transform: rotate(0deg) scale(0.746) skew(-2deg) translate(-34px);
-webkit-transform: rotate(0deg) scale(0.746) skew(-2deg) translate(-34px);
-moz-transform: rotate(0deg) scale(0.746) skew(-2deg) translate(-34px);
-o-transform: rotate(0deg) scale(0.746) skew(-2deg) translate(-34px);
-ms-transform: rotate(0deg) scale(0.746) skew(-2deg) translate(-34px);
}
.ddug:hover{
transform: rotate(360deg) scale(0.431) skew(-14deg) translate(-21px);
-webkit-transform: rotate(360deg) scale(0.431) skew(-14deg) translate(-21px);
-moz-transform: rotate(360deg) scale(0.431) skew(-14deg) translate(-21px);
-o-transform: rotate(360deg) scale(0.431) skew(-14deg) translate(-21px);
-ms-transform: rotate(360deg) scale(0.431) skew(-14deg) translate(-21px);
}

Abra um gadget html/javascript e cole este código:

<a href="SEULINK" title="NOME"><img src="URL DA IMAGEM" class="ddug" /></a>

Beijos!

3 comentários:

  1. Aiai, a preguiça é sempre um bom motivo para a inspiração chegar :( Sempre tenho isso, aff ¬¬
    Muito legal o efeito :3

    Beijos c: || mygoodies1.blogspot.com

    ResponderExcluir
  2. ótimo post!
    lamourmonage.blogspot.com

    ResponderExcluir
  3. Adorei o tutorial :3
    ~ kiss
    http://cantinhodaslovelys.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ê.