rotate()旋轉：旋轉rotate(-30deg)函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。
如果這個值為正值，元素相對原點中心順時針旋轉；
如果這個值為負值，元素相對原點中心逆時針旋轉。
用法：transform:rotate(-30deg);
效果：
關于加上瀏覽器的前綴：
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-mz-transform:rotate(-30deg);
為什么要加前綴 ？
css標準中各個屬性都要經歷從草案到定稿的過程，css3中的屬性進展都不一樣。瀏覽器廠商在標準尚未明確情況下提前支持會有風險，而且各個瀏覽器對CSS3的支持也不同，所以每種瀏覽器使用了自己的私有前綴與標準進行區分，當標準確立后，各大瀏覽器將逐步支持不帶前綴的css3新屬性。
目前已有很多私有前綴可以不寫了，但為了兼容老版本的瀏覽器，可以仍沿用私有前綴和標準方法，逐漸過渡。
前綴 瀏覽器
-webkit chrome和safari
-moz firefox
-mz IE
-o opera
注意：IE9版本以下不支持，所以就算加上前綴也是沒用的。Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器。
Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器，是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統平臺上運行。
html
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>01變形--旋轉 rotate()</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="wrapper"> <div><span>哈哈，旋轉旋轉(^_^)</span></div> </div> </body> </html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted #0F0;
}
.wrapper div {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: #093;
color: #fff;
font-size:20px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz--transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-mz-transform:rotate(-30deg);
/*為什么要加前綴 ？
css標準中各個屬性都要經歷從草案到定稿的過程，
css3中的屬性進展都不一樣。瀏覽器廠商在標準尚未
明確情況下提前支持會有風險，而且各個瀏覽器對CSS3的支持
也不同，所以每種瀏覽器使用了自己的私有前綴與標準進行區分，
當標準確立后，各大瀏覽器將逐步支持不帶前綴的css3新屬性
目前已有很多私有前綴可以不寫了，但為了兼容老版本的瀏覽器，可以仍沿用私有前綴和標準方法，逐漸過渡。
*/
/* 前綴 瀏覽器
-webkit chrome和safari
-moz firefox
-mz IE
-o opera
注意：IE9版本以下不支持，所以就算加上前綴也是沒用的。
*/
}
/*.wrapper span {
display: block;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}*/