1樓：千鋒教育
css3新增的乙個控制元素旋轉屬性的函式是rotate()[不要懷疑，它的確是乙個**的函式，他的使用很類似與js中的函式]。
同之前所講過的translate和scale，他也分為2d和3d的旋轉，差別就是z軸的旋轉。
現在我們來看例項，**如下：
demo的div裡面有三個div，最終實現的效果如下圖：
現在我們對其應用rotate，假設不知道裡面可以傳入幾個值，那我們可以分別試試傳入不同數量的值對比效果，給demo加上：
transform:rotate(45deg)（旋轉45度，deg是degree的縮寫，意為角度；當然這只是乙個單位，還有別的單位，但不常用；你也可以直接採用數字而不用單位，這個數字會被自動轉換為角度）
效果如下圖：
我們再給demo加上：
transform:rotate(45deg，45deg);
會發現沒有變化，檢視**知道原來這個屬性瀏覽器沒有識別出來，這是為什麼呢？
這是因為預設的rotate（）只能傳入乙個旋轉角度值，而且預設的角度是以電腦螢幕的基準面，以自己的中心為基準點進行旋轉的。說白了他是乙個二維的旋轉。
那，我麼應該怎麼rotate進行三維的旋轉呢？
很簡單我之前又講到過translate的translate3d這一屬性；同樣rotate也有rotate3d的旋轉屬性。
既然是3d，那我們就很自然的知道他有rotatex()/rotatey()/rotatez()，這三個分支的旋轉屬性。
現在我們給demo加上
transform:rotate3d(45deg，45deg,0deg);
在瀏覽器當中我們同樣會發現不起效果，原因還是不識別。
其實這就是rotate3d和translate3d，不同的地方，translate3d傳入的三個值分別會被解析為xyz的位移距離，二translate則不會這麼解析，官方給出的解析方法是rotate3d(x?,y?,z?
,angle);也就是你需要對你需要旋轉的軸進行判斷，如果你要沿著該軸轉動那就將該軸的值設定為1，否則為0；然後在後面的angle中設定旋轉的角度，需要注意的是，angle只有乙個角度值。
所以上面正確的寫法是：
transform:rotate3d(1，1,0,45deg);
效果如下圖：
分析：上圖畫的座標軸沒畫好，見諒哈。
橫的是x軸，豎的是y軸，斜線是z軸(也就是你盯著電腦看視線到電腦這個軸)
rotate的轉動基準是以軸來轉動的，當多個軸交疊旋轉才會形成圍繞某個點旋轉的效果。
元素預設情況下，他所在的面是z軸與y軸所形成的面（或平行面）。當談圍繞x軸轉，若傳入的為正值，則元素上面會向螢幕裡面轉動，下面回向螢幕外面轉動，也就是向使用者轉動。其他的幾個面也是同樣的道理。
現在我們來看沿著單個軸轉動的情況，這樣會幫助你理解上面這段話。
現在我給demo加上
transform:rotatex(45deg);
有沒有發現圖象顯得沒有原來的高了，對比下兩邊的圖象。
其實元素的高度並沒有變，而是透視導致。
現象一張紙看他的側面和看他的正面，所得到的寬度是不一樣的。
rotatey()/rotatez()
這裡我就不做介紹了。因為它們的使用和rotatex一樣，只是轉的角度不同罷了。
好了rotate的初級使用就介紹到這裡了。
2樓：慕刓辭
可以的，乙個是正數的度數，乙個也可以是負值
css transform:rotate();怎麼設定旋轉方向？比如向左上角旋轉和以自身為中心放大
3樓：濮靈寒
transform:rotate(); -360的deg
css transform中的rotate的旋轉中心怎麼設定?
4樓：浪小客
1、我們用兩個相同的div編輯它，這是基本的div**。
2、這是乙個沒有旋轉的div。然後我們只設定灰藍色div的旋轉，以便我們確切地知道旋轉中心點是什麼。
3、設定灰藍色div是使用.t類名，然後使用變換，然後旋轉。注意角度是deg，這裡我們設定旋轉45度。
4、然後檢視對比度，灰色藍色div已旋轉，旋轉的中心點預設為div的中心。
5、如果我們想設定旋轉的中心點，我們可以使用transform-origin屬性。將旋轉中心設定為左上角，這意味著左上角是旋轉中心。
6、此時，旋轉中心已經改變，它已經變為左上角。效果如下。
5樓：我4蝸牛先生
使用transform-origin設定css3旋轉中心，分別有兩個引數，代表x和y軸的位置。
旋轉參考的零點：元素左上角的位置或者說盒子模型的左上角。
參考點的座標線：向右的x軸和幾何x軸一樣取正值，向下的y軸和幾何y軸相反取正值，**如下：
css transform中的rotate的旋轉中心設定有兩種：
1.使用關鍵字設定位置 transform-origin: center bottom;
第乙個引數可選center、left、right。分別代表盒模型幾何橫向中間，橫向左側，橫向右側
第二個引數可選center、top、bottom。分別代表盒模型幾何豎向中間，豎向頭部，豎向底部
2.使用畫素值設定位置 transform-origin:3px 40px; 兩個引數為座標值的x和y值，單位是畫素。
css和css3有什麼區別，CSS和CSS3有什麼區別
就是多了很多新的屬性，但向後相容css2和css，具體可以去w3school上看 http www.w3school.com.cn css3 css3 intro.asp 增加了點屬性，丟棄了點兒屬性，注意用法的改變就行了。沒什麼大區別，會css看看css3就行。 都是網頁樣式code，不同的在於c...
css3 transition transfrom translate animate有什麼區別
具體可以參考css.doyoe.com 這個手冊有詳細介紹transition 是過渡 背景色過渡 背景色過渡 背景色過渡 背景色過渡 背景色過渡 transfrom 是變換 transform matrix 0,1,1,1,10,10 transform translate 5 10px tran...
css3 漸變怎麼實現，CSS3怎麼做出過渡漸變效果
針對不同瀏覽器有不同的字首，基本還是相似的，下面的意思是線性漸變，從上方開始，從黑色漸變到白色 webkit linear gradient top,000,fff moz linear gradient top,000,fff o linear gradient top,000,fff 也可以加一...