Tutorial - Efeito Slow Rotate

|| ||


Olá Realezas ! Hoje trago o nosso segundo tutorial e o meu primeiro efeito que faço, na minha opinião eu gostei muito desse efeito e não é só porque foi eu que fiz, só para ver eu irei deixar um preview antes do tutorial.
Clica aqui (xx)


1. Vá em Modelo > Editar HTML > Aperte Ctrl + f > Pesquise por :
]]></b:skin>
2. Acima disso cole o seguinte código :
.rotateslow{
padding: 2px;/***Espaço entre ao borda e foto***/
border: 3px double #000000;/***Estilo de borda***/
transition:All 5s ease;
-webkit-transition:All 5s ease;
-moz-transition:All 5s ease;
-o-transition:All 5s ease;
transform: rotate(180deg) scale(0.75) skew(0.99deg) translate(0px);
-webkit-transform: rotate(180deg) scale(0.76) skew(0.99deg) translate(0px);
-moz-transform: rotate(180deg) scale(0.75) skew(0.99deg) translate(0px);
-o-transform: rotate(180deg) scale(0.75) skew(0.99deg) translate(0px);
-ms-transform: rotate(180deg) scale(0.75) skew(0.99deg) translate(0px);
}
.rotateslow:hover{
transform: rotate(360deg) scale(0.881) skew(1deg) translate(0px);
-webkit-transform: rotate(360deg) scale(0.881) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(0.881) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(0.881) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(0.881) skew(1deg) translate(0px);
3. Faça as alterações onde se pede.
4. Agora no Gadget de HTML/JavaScript o seguinte código :
<a href="Link" title="Nome"><img src="Link da Imagem" class="rotateslow" /></a>
<a href="Link" title="Nome"><img src="Link da Imagem" class="rotateslow" /></a>
<a href="Link" title="Nome"><img src="Link da Imagem" class="rotateslow" /></a>
<a href="Link" title="Nome"><img src="Link da Imagem" class="rotateslow" /></a>
Salve e pronto. Esse foi o post de hoje. Beijos e até mais.

4 comentários: