Das Ändern des Rotationszentrums mit dem jQueryRotate-Plugin funktioniert nicht

Question

Nur versuchen, das jQueryRotate-Plugin zu verwenden, um eine div zu drehen.

Laut der Dokumentation (http://jqueryrotate.com) sollte ich in der Lage sein, eine center Option zu verwenden, um das Center anzugeben, aber es funktioniert einfach nicht in Chrome, und ich frage mich, ob jemand eine Idee warum.

Ein einfacher Test, der div über die rechte untere Ecke drehen sollte, aber wie Sie in dieser Geige kann, es dreht sich immer noch um die Mitte des div: https://jsfiddle.net/7zm74ckk/1/

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

Hinweis: Ich bin nicht Suche nach anderen Methoden zum Drehen.

Answer 1

Sie müssen mit margin und padding spielen, um das zu erreichen!

Siehe meine fiddle oder das Snippet hier

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