CSS transform中的rotate的旋轉中心怎麼設置?


默認情況,變形的原點在元素的中心點,或者是元素X軸和Y軸的50%處。

我們沒有使用transform-origin改變元素原點位置的情況下,CSS變形進行的旋轉、移位、縮放等操作都是以元素自己中心(變形原點)位置進行變形的。但很多時候需要在不同的位置對元素進行變形操作,我們就可以使用transform-origin來對元素進行原點位置改變,使元素原點不在元素的中心位置,以達到需要的原點位置。

如果我們把元素變換原點(transform-origin)設置0(x) 0(y),這個時候元素的變換原點轉換到元素的左頂角處。

改變transform-origin屬性的X軸和Y軸的值就可以重置元素變形原點位置,其基本語法如下所示:

`transform-origin:[&

| & | left | center | right | top | bottom] | [&

| & | left | center | right] | [[&

| & | left | center | right] [&

| & | top | center | bottom]] & ?`

transform-origin屬性值可以是百分比、em、px等具體的值,也可以是top、right、bottom、left和center這樣的關鍵詞。

2D的變形中的transform-origin屬性可以是一個參數值,也可以是兩個參數值。如果是兩個參數值時,第一值設置水平方向X軸的位置,第二個值是用來設置垂直方向Y軸的位置。

3D的變形中的transform-origin屬性還包括了Z軸的第三個值。其各個值的取值簡單說明如下:

  • x-offset:用來設置transform-origin水平方向X軸的偏移量,可以使用&和&

    值,同時也可以是正值(從中心點沿水平方向X軸向右偏移量),也可以是負值(從中心點沿水平方向X軸向左偏移量)。

  • offset-keyword:是top、right、bottom、left或center中的一個關鍵詞,可以用來設置transform-origin的偏移量。
  • y-offset:用來設置transform-origin屬性在垂直方向Y軸的偏移量,可以使用&和&

    值,同時可以是正值(從中心點沿垂直方向Y軸向下的偏移量),也可以是負值(從中心點沿垂直方向Y軸向上的偏移量)。

  • x-offset-keyword:是left、right或center中的一個關鍵詞,可以用來設置transform-origin屬性值在水平X軸的偏移量。
  • y-offset-keyword:是top、bottom或center中的一個關鍵詞,可以用來設置transform-origin屬性值在垂直方向Y軸的偏移量。
  • z-offset:用來設置3D變形中transform-origin遠離用戶眼睛視點的距離,默認值z=0,其取值可以&,不過&

    在這裡將無效。

看上去transform-origin取值與background-position取值類似。為了方便記憶,可以把關鍵詞和百分比值對比起來記:

  • top = top center = center top = 50% 0
  • right = right center = center right = 100%或(100% 50%)
  • bottom = bottom center = center bottom = 50% 100%
  • left = left center = center left = 0或(0 50%)
  • center = center center = 50%或(50% 50%)
  • top left = left top = 0 0
  • right top = top right = 100% 0
  • bottom right = right bottom = 100% 100%
  • bottom left = left bottom = 0 100%

詳細的可以點擊:CSS3 Transform——transform-origin

相關的介紹:transform | 博客自由標籤


隨手一搜就有結果的啊………… mdn css roate origin

文檔在此:transform-origin


謝邀

RTFM


上個月剛好寫了一篇博客,可以當成一個參考實例,結合 @大漠 的答案來看,或許對你理解有幫助。

純CSS3實現一個旋轉的3D立方體盒子


transform-origin:1px 1px;

第一個數值x軸坐標 第二個數值y軸坐標

(簡潔版)


推薦閱讀:

HTML5 的 hidden="hidden" 和CSS的 display:none有什麼區別?
overflow:hidden的問題?
怎樣隱藏滾動條還能滾動頁面(包括滑鼠滾輪)?
如何理解塊級格式化上下文BFC(block formatting context)?
什麼情況下適合用 table+CSS 而不是 DIV+CSS ?

TAG:HTML | CSS | CSS3 | DivCSS | HTMLCSS |