Изменение центра вращения с помощью плагина jQueryRotate не работает

Question

Просто пытаюсь использовать плагин 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]
    })
})

Примечание: я не ищу другие способы поворота.

Answer 1

Вы должны играть с margin а также padding чтобы достичь этого!

Смотрите мою скрипку или фрагмент здесь

$("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>