Tutorial - fazer imagem girar 360 graus


Tutorial muito legal feito por mim mesmo .
Créditos: NH Create ...




 1º - Entre no Blogger > Design > HTML



2° - Procure pela tag:  ]]></b:skin>     
(Ctrl + F para procurar) , e acima da tag  ]]></b:skin> cole o código :

img.flip360 { 
z-index:999999; 
-webkit-transition:All 1s ease; 
-moz-transition:All 1s ease; 
-o-transition:All 1s ease; 
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px); 
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px); 
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px); 
}

img.flip360:hover{ 
z-index:9999; 
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px); 
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px); 
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px); 
}
2º - salve 



3° - Agora você vai na url da sua imagem que você deseja colocar o efeito e fassa isso:

Depois da url da imagem acrecente isso: class="flip360"
-----------------------------------------------
Exemplo: <img src="url da imagem aqui" class="flip360"   />

0 comentários:

Postar um comentário