效果图如下： 右侧导航栏英文字母旋转
如有需要参考：
<!DOCTYPE html>
<html>
<head>
<title>右侧导航栏英文字母旋转</title>
</head>
<body>
<style>
/* css初始化 */
a,body,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,input,li,p,ul{margin:0;padding:0}
li,ul{list-style:none}
img{vertical-align:top;border:0 none}
a{text-decoration:none}
a,a:visited{color:#424242;text-decoration:none}
i{font-style:normal}
em{font-style:normal}
.fl{float:left}
.fr{float:right}
.pr{position:relative}
.pa{position:absolute}
.w{margin:0 auto}
.clearfix:after{display:block;content:".";height:0;line-height:0;visibility:hidden;clear:both}
.clearfix{zoom:1}
/* 页面样式开始 */
ul{padding-top:50px;float:right}
li{margin-bottom:100px;filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg)}
</style>
<ul class="clearfix">
<li>transform</li>
<li>transform</li>
<li>transform</li>
<li>transform</li>
<li>transform</li>
</ul>
</body>
</html>