使用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>