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>

を参照してください。