通过设置transform:rotate()可以将元素进行不同角度的旋转：
下面是一些测试代码：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div>
<img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" >
下面是旋转后的图片
<br/>
<img src="//www.baidu.com/img/bd_logo1.png" alt="Flowers" style='transform:rotate(90deg)'>
</body>
</html>
测试结果如下：
更多详细介绍：http://www.w3school.com.cn/css3/index.asp
在线测试地址：http://www.w3school.com.cn/tiy/t.asp?f=css3_transform_rotate