HTML - Efeito Skew on/off

Olá ~ Aqui estou eu fazendo algo que prometi a mim mesma que não iria fazer novamente: tutoriais de HTML. Vou começar explicando um pouquinho do básico entendimento necessário dessa língua. É a "programação" que, nós do blogger, usamos pra criar os layouts, efeitos e etc, mas os efeitos em si são geralmente css, que é uma linguagem de personalização. Então eu posso resumir tudo em:

Faça os passos corretamente, pois caso contrário, todo o resto que está abaixo daquele código, fica bugado, e as vezes é difícil achar o pequeno bug/erro

 Vamos ao efeito em si ♥
 O efeito está na imagem do primeiro widget da esquerda, sim aquela imagem de uma "sereia"

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

.skew
transition:All 1s ease;
opacity: 0.5;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}
.skew:hover{
opacity: 1.0;
transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
}

  E pra usar é bem simples:

 Faça um widget de HTML/JavaScript e cole

<div class="dj"><img border="0" src="LINK DA IMAGEM QUE IRÁ TER O EFEITO" class="return" /></div>

 E pronto ♥ Obrigado por lerem esse post gigante e até quando me der na telha ♥