在CSS3中，我們可以使用rotate()方法來將元素相對中心原點進行旋轉。這裡的旋轉是二維的，不涉及三維空間的操作。關於3D變形，請關注我們未來上線的CSS3進階教程。
語法：
transform：rotate(度數);
說明：
度數指的是元素相對中心原點進行旋轉的度數，單位為deg。其中，deg是degree（度數）的縮寫。
如果度數為正，則表示元素相對原點中心順時針旋轉；如果度數為負，則表示元素相對原點中心進行逆時針旋轉。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3旋轉rotate()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed gray;
}
/*設置當前元素樣式*/
#current
{
width:200px;
height:100px;
line-height:100px;
color:white;
background-color: #007BEE;
text-align:center;
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎浏覽器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎浏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current">順時針旋轉30度</div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡虛線框為原始位置，藍色背景盒子為順時針旋轉30度後的效果。