Css_制作旋轉字體

/*
 * PS:旋轉層的背景是必須的,不然IE8以下使用濾鏡旋轉會讓字體變模糊,效果不太好.
 */
<style type="text/css">
.box{position:relative;width:20px;height:200px;background:#CCC;margin:50px;overflow:hidden;}
.main{position:absolute;width:100px;height:100px;line-height:100px;top:10px;left:50%;margin-left:-50px;color:#FFF;text-align:left;}
.main{-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
</style>
<!--[if lte IE 8]>
<style>
.main{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);background:#CCC;}
</style>
<![endif]-->
<div class="box">
 <div class="main">hello world!!</div>
</div>