webkit核心浏览器使用和火狐浏览器使用transform可以做到旋转，IE要使用DXImage滤镜，代码如下：
transform:rotate(90deg)-ms-transform:rotate(90deg) /* Internet Explorer 9*/
-moz-transform:rotate(90deg) /* Firefox */
-webkit-transform:rotate(90deg) /* Safari 和 Chrome */
-o-transform:rotate(90deg) /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
代码如下：
<html><head>
<title>Untitled</title>
<style>
.div1 {
width: 100px
height: 30px
transform:rotate(90deg)
-ms-transform:rotate(90deg) /* Internet Explorer 9*/
-moz-transform:rotate(90deg) /* Firefox */
-webkit-transform:rotate(90deg) /* Safari 和 Chrome */
-o-transform:rotate(90deg) /* Opera */
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
border:1px solid #4EC83B
}
</style>
</head>
<body>
</br>
</br>
</br>
<div class="div1">
我旋转了
</div>
</br>
</br>
</br>
<div style="-ms-writing-mode:tb-rlborder:1px solid #4EC83Bwidth: 30pxheight: 100px">
Hello World!
</div>
</body>
</html>
效果如下：
对于英文，IE还有一种方式，使用-ms-writing-mode，中文只能竖排，不能旋转，英文可以
-ms-writing-mode:tb-rl -webkit-transform-origin: center bottomtransform-origin: center bottom
transform-origin：[ <percentage>| <length>| left | center① | right
] [ <percentage>| <length>| top | center② | bottom
]?
默认值：50% 50%，效果等同于center
center
适用于：所有块级元素及某些内联元素
继承性：无
取值：
<percentage>：
用百分比指定坐标值。可以为负值。
<length>：
用长度值指定坐标值。可以为负值。
left：
指定原点的横坐标为left
center①：
指定原点的横坐标为center
right：
指定原点的横坐标为right
top：
指定原点的纵坐标为top
center②：
指定原点的纵坐标为center
bottom：
指定原点的纵坐标为bottom
说明：
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
对应的脚本特性为transformOrigin。
