Изменение центра вращения с использованием плагина 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.

Смотрите мой fiddle или фрагмент кода здесь

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