COMO FAZER A IMAGEM GIRAR E SUMIR QUANDO PASSA O MOUSE NA SIDE.
No tutorial de hoje vou ensinar a vocĂȘs como fazer a imagem da sidebar girar e depois sumir. Aqui tem um exemplo (xx). Vamos lĂĄ?
O nome do efeito que faz a imagem âsumirâ Ă© a #sidebar:hover que fiz um tuto mais explicativo aqui (xx) e o que faz a imagem âgirarâ Ă© o transform. Vou usar uma imagem normal do tutorial que eu fiz sĂł pra mostrar pra vocĂȘs.
 #aloha1 img {margin-top:38px;margin-left:75px; width:30px;height:20px;position:fixed;background-color:#fff;}
#sidebar:hover #aloha1 img {-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out; -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg) opacity:0;}
 Toda a âmĂĄgicaâ acontece no #sidebar:hover por isso nĂŁo retirem a div da frente e nenhum cĂłdigo que estĂĄ nele.
O â-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-outâ é o tempo que a sua transição vai demorar pra ser feita, ai ta 9 segundos mas se quiserem diminuir podem diminuir mas nĂŁo se esqueçam de deixar o 0 na frente e NUNCA retirem o ponto e o âsâ da frente. O -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg) é o que faz a imagem girar. O rotate significa ârodarâ e nĂșmero entre parĂȘnteses Ă© o grau que a imagem vai virar. Nesse caso coloquei pra imagem virar 360 graus, mas se quiserem diminuir podem diminuir mas nunca tirem do parĂȘnteses e nunca tirem o âdegâ da frente. O opacity é o que faz a imagem sumir portanto mantenham o nĂșmero 0 pois se colocarem um nĂșmero maior que 0 a imagem nĂŁo some.
