Rotate links and vertically centre on page with fixed positioning

Rotate links and vertically centre on page with fixed positioning

Ive rotated some links in a list. Now I need them to be vertically
centered on the page and have a fixed position.
This is what I want:
Below is my attempt but im getting stuck. If the links are centered within
the ul, before its rotated the ul has a width of 100%. However once
rotated its height is its width before it was centered, which is not 100%
of the page.
http://jsfiddle.net/X3Nf9/5/
<div>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</div>
li, a {
display: inline-block;
}
ul {
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
padding: 0;
margin: 0;
text-align: center;
}
div {
position: fixed;
bottom: 0;
}
}