post rst mes 對比 body 改變 lin web nta

transform-origin屬性

默認情況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處。
我們沒有使用transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、移位、縮放等操作都是以元素自己中心（變形原點）位置進行變形的。但很多時候需要在不同的位置對元素進行變形操作，我們就可以使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
如果我們把元素變換原點（transform-origin）設置0（x） 0（y），這個時候元素的變換原點轉換到元素的左頂角處。 transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。

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

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

• x-offset：用來設置transform-origin水平方向Ｘ軸的偏移量，可以使用<length>和<percentage>值，同時也可以是正值（從中心點沿水平方向Ｘ軸向右偏移量），也可以是負值（從中心點沿水平方向Ｘ軸向左偏移量）。
• offset-keyword：是top、right、bottom、left或center中的一個關鍵詞，可以用來設置transform-origin的偏移量。
• y-offset：用來設置transform-origin屬性在垂直方向Ｙ軸的偏移量，可以使用<length>和<percentage>值，同時可以是正值（從中心點沿垂直方向Ｙ軸向下的偏移量），也可以是負值（從中心點沿垂直方向Ｙ軸向上的偏移量）。
• x-offset-keyword：是left、right或center中的一個關鍵詞，可以用來設置transform-origin屬性值在水平Ｘ軸的偏移量。
• y-offset-keyword：是top、bottom或center中的一個關鍵詞，可以用來設置transform-origin屬性值在垂直方向Ｙ軸的偏移量。
• z-offset：用來設置3D變形中transform-origin遠離用戶眼睛視點的距離，默認值z=0，其取值可以<length>，不過<percentage>在這裏將無效。

看上去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%

可以看一下效果，一個圓圍繞自己的中心點不停地旋轉 css部分：

<style>
#cl{
      width:200px;
      height:200px;
      background:#f99;
      margin:0 auto;
      text-align: center;
      font:800 100px/200px "TypeLand 康熙字典體試用版";
      border-radius: 50%;
      animation: myfirst 2s infinite linear;
      transform-origin:center 50%;
      /*transform-origin:20% 50%; 定元素的基點位置*/
      /*-moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      transform:rotate(45deg);*/
    }
    @keyframes myfirst
    {
      from {transform: rotate(0);}
      to {transform: rotate(360deg);}
    }
</style> 

html部分：

<div id="cl">
  福
</div>

可以看出一個圓繞著中心點不停地旋轉

CSS transform中的rotate的旋轉中心怎麽設置