Menu Unlike

Oi gente , lembram do Menu em Imagem Hover ? Então esse é a mesma coisa só foi acrescentado um linha de código que ao invés dele apenas descer para baixo, ele vira ao contrário {dai vem o nome do menu >.<}. Então vamos ao que interessa:

Bom vocês vão fazer tudo o que está no tutorial do Cherry Bomb só que no código css vocês colocam este :

.menu1{

background: transparent url('url da sua imagem') no-repeat bottom center;

width: largura px;

height: metade da alturapx;

margin-left: 0px;

transition-duration: 0.10s;

-webkit-transition-duration: 0.10s;

-moz-transition-duration: 0.10s;}

.menu1:hover {

background: transparent url('url da sua imagem') no-repeat  top center;

width: largurapx;

height: metade da alturapx;

-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform: rotate(180deg);

transition-duration: 0.5s;

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;} 

E edita com as medidas que estão em azul e pronto.

Meu Resultado.

 Creditos : Cherry Bomb e Sugoi Tutoriais