Effet slide CSS3

Bonjour,
Voilà, j'aimerais produire cette effet: http://www.css3create.com/Menu-Slides-avec-CSS3

J'ai donc suivi les quelques indications que j'ai à ma disposition, mais... Absolument rien n'a fonctionné!

Voilà le code CSS:

<style type="text/css">
#test div.menu{
position:relative;
width:505px;
height:220px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
background:#272c31;
}
#test ul{
width:489px;
height:209px;
margin:auto;
padding:3px;
background:black;
overflow:hidden;
border-bottom:1px solid rgba(255,255,255,0.35);
}
#test ul li div{
height:208px;
width:324px;
color:#6F7A81;
margin-left:33px;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
background:#bdc7d0;
}
#test ul li{
position:relative;
float:left;
overflow:hidden;
width:30px;
height:209px;
margin-right:3px;
list-style:none;
text-align:right;
font-size:1.1em;
/*transition*/
-webkit-transition:width 1s ease;
   -moz-transition:width 1s ease;
     -o-transition:width 1s ease;
        transition:width 1s ease;
}
#test ul li:last-child{
margin-right:0px;
}
#test ul li a{
display:block;
position:absolute;
z-index:20;
bottom:-30px;
left:0px;
height:26px;
width:182px;
padding-right:25px;
padding-top:4px;
color:#fff;
text-decoration:none;
border-right:1px solid rgba(255,255,255,0.35);
border-left:1px solid #000;
text-shadow:1px 0px 0px rgba(0,0,0,0.8);
/*transform-origin*/
-webkit-transform-origin:0px 0px;
   -moz-transform-origin:0px 0px;
    -ms-transform-origin:0px 0px;
     -o-transform-origin:0px 0px;
        transform-origin:0px 0px;
/*transform*/
-webkit-transform:rotate(-90deg);
   -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
     -o-transform:rotate(-90deg);
        transform:rotate(-90deg);
border-radius:5px;
background:#353b42;
}
#test ul li:hover{
width:357px;
}
#test ul li:hover a{
text-shadow:1px 0px 0px rgba(0,0,0,0.25);
background:#d64e00;
}
</style>

Et le code HTML

<div id="test">
<ul>
<li><a href="">Test 1</a><div>Blabla

</div></li>
<li><a href="">Test 2</a><div>Blabla

</div></li>
<li><a href="">Test 3</a><div>Blabla

</div></li>
<li><a href="">Test 4</a><div>Blabla

</div></li>
<li><a href="">Test 5</a><div>Blabla

</div></li>
</ul>
</div>

Quelqu'un pourrait m'éclairer sur ce qui n'a pas été pour que rien ne fonctionne?

Merci d'avance!