在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度後的效果。