CSS float bottom

HTML

<div id="wrapper">
    <ul>
        <li> item 1 </li>
        <li> item 2 </li>
        <li> item 3 </li>
        <li> item 4 </li>
        <li> item 5 </li>
        <li> item 6 </li>
        <li> item 7 </li>
        <li> item 8 </li>
        <li> item 9 </li>
    </ul>
    
</div>

CSS

#wrapper{
    width: 200px;
    height: 400px;
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    background: #DDD;
}

li{
    float:left;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);   
    background: #AFA;
}