使用 jQueryRotate 插件更改旋转中心不起作用答案

【问题标题】：Changing the center of rotation using jQueryRotate plugin is not working使用 jQueryRotate 插件更改旋转中心不起作用
【发布时间】：2016-04-28 20:37:43
【问题描述】：

只是尝试使用 jQueryRotate 插件来旋转div。

根据文档 (http://jqueryrotate.com)，我应该能够使用 center 选项来指定中心，但它在 Chrome 中根本不起作用，我想知道是否有人知道原因。

一个简单的测试应该在右下角旋转div，但正如你在这个小提琴中可以做到的，它仍然围绕div的中间旋转：https://jsfiddle.net/7zm74ckk/1/

$("div").on("click", function() {
    $(this).rotate({
        animateTo: 90,
        center: [50,50]
    })
})

注意：我不是在寻找其他旋转方法。

【问题讨论】：

标签： jquery jquery-plugins rotation jquery-rotate

【解决方案1】：

您必须使用 margin 和 padding 来实现这一目标！

在此处查看我的fiddle 或 sn-p

$("div").on("click", function() {
  $(this).rotate({
      angle: 0,
      center: [50, 50],
      animateTo:90
  })
})

div .outer {
  height: 200px;
  width: 200px;
}

div .blue {
  margin: 130px;
  padding: 30px;
  height: 30px;
  width: 30px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script>
<div class="outer">
  <div class="blue"></div>
</div>

【讨论】：