CSS3 transform:rotate( deg )

CSS3目前有支援的瀏覽器

• Firefox
• Safari
• Chrome
• Opera 

IE8需要透過其他外掛套件來支援，IE9會開始支援HTML5與CSS3

這是div

這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。

這是div2,連字也會旋轉,轉45

我們可以看到CSS3旋轉的點是以DIV的中心為基準

HTML+CSS3碼

<style type="text/css"> 
.divClass
{
width:200px;
height:100px;
background-color:LemonChiffon;
border:1px solid LightSkyBlue;
}
div#_rotate_1
{
transform:rotate(90deg);
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

div#_rotate_2
{
transform:rotate(45deg);
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
</style>

<div class="divClass">
 這是div
</div>
<div class="divClass" id="_rotate_1">
  這是div1,旋轉90deg,與Flex不同,基準點不是左上旋轉。</div>
<div class="divClass" id="_rotate_2">
  這是div2,連字也會旋轉,轉45
</div>

參考資料
維基百科webkit
w3Schools