Menu con forma de cartel giratorio

Aprovechando las virtudes y posibilidades que ofrece el CSS3, os traigo este menu con un original diseño y sin necesidad de utilizar ninguna imagen. Como ya he indicado en el titulo de esta entrada y podeis observar, este menu tiene forma de cartel urbano, con su barra de metal correspondiente. Cuando lo vemos aparece con una perspectiva como si lo vieramos 'de lado' y al pasar el cursor del raton sobre el, gira hacia nosotros viendolo completamente 'de frente'. El resultado lo teneis aqui aqui abajo, pasad el raton y vereis el efecto giratorio a ver si os mola.

Menu

---

Enlace
Enlace
Enlace
Enlace

Si te gusta y quieres ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrar el menu. Sustituye donde pone LINK por las urls que desees, y donde pone TEXTO ENLACE por el texto a mostrar en cada enlace. Si quieres añadir mas, escribe la la linea <a href="LINK">TEXTO ENLACE</a><br /> tantas veces como quieras a continuacion de las otras, por el contrario si deseas poner menos enlaces, elimina las lineas correspondientes.

ver codigo

<div class="wrap"><div class="sb"><div class="cartel"><div class="box">Menu<hr>
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
</div></div></div></div><div class="barra"></div>

<style>
.barra {
background: #070405;
background: -moz-linear-gradient(left, #070405 0%, #29b0df 50%, #070405 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#070405), color-stop(50%,#29b0df), color-stop(100%,#070405));
background: -webkit-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -o-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -ms-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: linear-gradient(to right, #070405 0%,#29b0df 50%,#070405 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#070405', endColorstr='#070405',GradientType=1 );
width: 10px;height: 420px;
position: relative;z-index:1;
bottom: 220px;left: 70px;
border-top: 3px solid #000000;border-bottom: 3px solid #000000;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.wrap {
top: 10%;
right: 5px;
height: 80%;
}
.sb{
position: relative;
top: 50px;
perspective:800px;
}
.cartel{
width: 150px;padding-bottom:10px;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.8) 98%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(98%,rgba(0,0,0,0.8)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
color: #d9d9d9;
text-align: center;
border: 1px solid #000000;
border-radius: 7px;z-index:2;
box-shadow: 0 0 9px #04E9FA inset;
transform: rotateY(95deg) ;
transition: transform 0.5s;
}
hr{
  width: 100%;
  border: 1px solid rgba(41,276,223,.3);
}
.cartel:hover{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cartel a:hover{
color:#A9F5F2 !important;}
.cartel a {
color:#F5F6CE !important;}
.selected:after {
content: "";
color: #ff0;
display: block;
position: absolute;
left: 40%;
top: 90%;
}
.box{
  margin: 15px;
  font-size: 1.5rem;
}
</style>