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!