#tutorial de efeito

Galera, achei um código super legal em CSS3, que não tem suporte em todos os navegadores, então talvez não funcione em algumas versões de navegadores mais antigos. Veja o efeito clicando aqui 

Gostou? E é bem simples o código. 

Estava passeando pelos blogs da vida, quando me deparo com o http://euamohtml.blogspot.com.br e um super tutorial de um efeito bem bonitinho para usar em parcerias/afiliados. Esse nome é ela quem deu, pois foi ela quem inventou esse efeito. Clique para ver.

Legal né? E o código é bem simples:

CSS

.isa-cute-rotate{border-radius: 15px; opacity:0.6; -webkit-transition-duration: .80s;} .isa-cute-rotate:hover {opacity:1.0; -WEBKIT-TRANSFORM: ROTATE(-720DEG) SCALE(0.8); -webkit-transition-duration: .80s;}

HTML

<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="3"> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> <a href="LINK" title="TÍTULO"><img class="isa-cute-rotate" src="IMAGEM" /></a> </marquee>

O css é só por entre as tags <style> e </style> e o HTML você põe onde quer que as imagens vão ficar passando. Você pode também por links, awards e o que mais quiser que passe ali.

Esse efeito pode ser usado tanto em imagens, icons, quanto em links, palavras ou até textos. É recomendável que use apenas em pequenas e necessárias coisas. Exemplo é o bottom 'parceiros' que eu uso. E esse aqui:

(efeito só pode ser visualizado aqui no htmlrules)

Gostou? Simples! Basta por esse código no seu css:

.mudahr{ -webkit-transition-duration: 1.20s; width:auto;} .mudahr:hover{ -webkit-transform: rotateY(360deg); }

E agora usar esta div quando for usar:

<div class="mudahr"> imagem/frase/link </div> ou <img src="LINK-DA-IMAGEM" class="mudahr">

Enquanto que o primeiro codigo dá para qualquer tipo de material e o segundo é o mais indicado para imagem, pois ~economiza~ codigo e tamanho, o que melhora o desempenho do seu site.

Gostou? Curta e de reglog, se for util ou tiver pego!

Exemplo do efeito: &&

Legal né? E é simples de fazer! Vamos lá? 

Copie o css e coloonde quiser entre as tags <style> e </style>

<!--- MENU GIRA E AUMENTA POR HTMLRULES ---> #girahr {  background-color: #eee; // cor do bg normal -webkit-transition: all 1s ease-in-out;  -moz-transition: all 1s ease-in-out;  -o-transition: all 1s ease-in-out;  -ms-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;  width: 300px; //tamanho da caixinha }  #girahr:hover {  background-color: #fc3; //cor do bg de quando aumentar -webkit-transform: rotate(360deg) scale(2);  -moz-transform: rotate(360deg) scale(2);  -o-transform: rotate(360deg) scale(2);  -ms-transform: rotate(360deg) scale(2);  transform: rotate(360deg) scale(2);  }

Agora o html, que também é simples. É só colar no que quiser que tenha esse efeito:

<div id="girahr"> o que quiser aqui</div>

Pronto, agora você vai ter o efeito. Você pode brincar com os valores, lembrando que todos os 'tranform' são importantes SIM, pra que faça o efeito acontecer em todos os browsers, ok?