Javascript 左侧和顶部值更改后css旋转不起作用

我有一个div。我正在尝试对div本身的mousedown/mousemove事件应用旋转css

当我第一次旋转时，它工作正常

但当左值和顶值发生变化时，逆时针方向旋转不起作用。我该如何解决这个问题

var img=$（'.pointer'）；
var offset=img.offset（）；
var mouseDown=false；
img.mousedown（函数（e）{
mouseDown=true；
});
$（文档）.mousemove（鼠标）；
功能鼠标（evt）{
if（mouseDown==true）{
var center_x=（offset.left）/*+（img.width（）/2）*/；
var center_y=（offset.top）/*+（img.height（）/2）*/；
var mouse_x=evt.pageX；
var mouse_y=evt.pageY；
var radians=Math.atan2（鼠标x-中心x，鼠标y-中心y）；
变量度=（弧度*（180/数学π）*-1）+90；
css（'-moz transform'，'rotate（'+degree+'deg'）；
css（'-webkit transform'，'rotate（'+degree+'deg'）；
css（'-o-transform'，'rotate（'+degree+'deg'）；
css（'-ms transform'，'rotate（'+degree+'deg'）；
img.css（'transition'，'all 0.1'）；
}
}
$（文档）.mouseup（函数（e）{
mouseDown=false；
//偏移量=img.offset（）；
})
$（'.changeTopLeft'）。单击（函数（）{
$（'.pointer'）.css({
左：“200px”，
顶部：“300px”
});
});
.pointer{
高度：5px；
位置：绝对位置；
顶部：150px；
宽度：200px；
边框：1px纯红；
左：150px；
变换原点：左上；
}

更改左上角
请查找JSFIDLE链接