CSS3 Rotate menu

HTML kode 

 <div id="menu">
     <ul>
         <li><p><img src="images/logo.png"></p></li>
         <li><p>About me</p></li>
         <li><p>My works</p></li>
         <li><p>Blog</p></li>
         <li><p>Contact me</p></li>
         
         <div class="clear"></div>
     </ul>
 </div>

CSS kode 

 #menu ul li {
 float: left;
 }
 
 #menu ul li:hover {
 position: relative;
 z-index: 1;
 }
 
 #menu ul li:nth-child(1) {
 background-color: #333333;
 }
 
 #menu ul li:nth-child(2) {
 background-color: #333745;
 -webkit-transform: rotate(-10deg); 
 -moz-transform: rotate(-10deg);
 }
 
 #menu ul li:nth-child(2) p {
 -webkit-transform: rotate(10deg); 
 -moz-transform: rotate(10deg);
 }
 
 #menu ul li:nth-child(3) {
 background-color: #77c4d3;
 -webkit-transform: rotate(4deg); 
 -moz-transform: rotate(4deg);
 }
 
 #menu ul li:nth-child(3) p {
 -webkit-transform: rotate(-4deg); 
 -moz-transform: rotate(-4deg);
 }
 
 #menu ul li:nth-child(4) {
 background-color: #daede2;
 -webkit-transform: rotate(1deg); 
 -moz-transform: rotate(1deg);
 }
 
 #menu ul li:nth-child(4) p {
 -webkit-transform: rotate(-1deg); 
 -moz-transform: rotate(-1deg);
 }
 
 #menu ul li:nth-child(5) {
 background-color: #ea2e49;
 -webkit-transform: rotate(-5deg); 
 -moz-transform: rotate(-5deg);
 }
 
 #menu ul li:nth-child(5) p {
 -webkit-transform: rotate(5deg); 
 -moz-transform: rotate(5deg);
 }