transform rotate的旋轉中心如何設置

一般狀況下，旋轉的原來爲中心點。也就是X軸和Y軸的50% 50%的地方。

若是想改變transform-origin的位置不在原點，便可設置相應的數值便可。好比：transform-origin:0 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 1
• 下代碼爲鼠標移過左右晃動~~~

• a:hover{
      -webkit-animation:swinging 10s ease-in-out 0s infinite;
      -moz-animation:swinging 10s ease-in-out 0s infinite;
      animation:swinging 10s ease-in-out 0s infinite;
  
      -webkit-transform-origin:50% 0;
      -moz-transform-origin:50% 0;
      transform-origin:50% 0;
  }
  @-webkit-keyframes swinging{
      0% { -webkit-transform: rotate(0); }
      5% { -webkit-transform: rotate(10deg); }
      10% { -webkit-transform: rotate(-9deg); }
      15% { -webkit-transform: rotate(8deg); }
      20% { -webkit-transform: rotate(-7deg); }
      25% { -webkit-transform: rotate(6deg); }
      30% { -webkit-transform: rotate(-5deg); }
      35% { -webkit-transform: rotate(4deg); }
      40% { -webkit-transform: rotate(-3deg); }
      45% { -webkit-transform: rotate(2deg); }
      50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
      100% { -webkit-transform: rotate(0); }
  }
   
  @-moz-keyframes swinging{
      0% { -moz-transform: rotate(0); }
      5% { -moz-transform: rotate(10deg); }
      10% { -moz-transform: rotate(-9deg); }
      15% { -moz-transform: rotate(8deg); }
      20% { -moz-transform: rotate(-7deg); }
      25% { -moz-transform: rotate(6deg); }
      30% { -moz-transform: rotate(-5deg); }
      35% { -moz-transform: rotate(4deg); }
      40% { -moz-transform: rotate(-3deg); }
      45% { -moz-transform: rotate(2deg); }
      50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
      100% { -moz-transform: rotate(0); }
  }
   
  @keyframes swinging{
      0% { transform: rotate(0); }
      5% { transform: rotate(10deg); }
      10% { transform: rotate(-9deg); }
      15% { transform: rotate(8deg); }
      20% { transform: rotate(-7deg); }
      25% { transform: rotate(6deg); }
      30% { transform: rotate(-5deg); }
      35% { transform: rotate(4deg); }
      40% { transform: rotate(-3deg); }
      45% { transform: rotate(2deg); }
      50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
      100% { transform: rotate(0); }
  }