只是尝试使用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]
})
})
注意:我不是在寻找其他旋转方法。
答案 0 :(得分:0)
您必须使用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>