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); }
  }

   

transform rotate的旋转中心如何设置

标签：

原文地址：http://www.cnblogs.com/feiyang1989/p/4670795.html