Menu Giratório

Boa noite pessoal, venho trazer mais um menu hoje. Irei mostrar como colocar um menu giratório, achei o tutorial no Kawaii World então todos os créditos vai para lá. Gostei muito do menu, nunca usei ele... mas pretendo usar futuramente. Caso queira dar uma olhadinha brevia no menu abaixo menu. Gostou? Então vamos ao tutorial.

Brevia do efeito

1. Em editar HTML, procure por ]]></b:skin> então acima dele coloque isso:

Códigos

#menu
    {background: #ffa1be;
    color: #ffffff;
    font: normal 20px Capriola;
text-shadow:0 1px #ccc;
    width: 70px;
    height: 50px;
    display: inline-block;
    padding: 25px 5px 5px 5px;
    margin: 5px;
    margin-right: 2px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    text-align: center;
    -moz-box-shadow: inset 0 0 0px 8px #ea649a;
    -webkit-box-shadow: inset 0 0 0px 8px #ea649a;
    box-shadow: inset 0 0 0px 8px #ea649a;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;}
#menu:hover
    {opacity: .80;
    -moz-box-shadow: inset 0 0 0px 38px #7dd3ef;
    -webkit-box-shadow: inset 0 0 0px 38px #7dd3ef;
    box-shadow: inset 0 0 0px 38px #7dd3ef;      -webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);}

2. Personalize como desejar, agora vá ate seu layout e cole o código abaixo em um gadget de HTML/JavaScript:

Códigos

<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"
onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br />

Basta arrumar os links e o nome e prontinho!