使用纯javascript旋转对象

我试图在鼠标移动时围绕一个中心旋转一个对象，一切都很完美，但是当我第一次点击这个对象来旋转它时，位置改变了

var el、offsetTop、offsetft、offsetWdt、offsetHit、mouseDown；
el=document.getElementById（'switcher'）；
var offset=getOffset（el）；
offsetTop=offset.top；
offsetLft=offset.left；
offsetWdt=el.offsetWidth；
offsetHit=el.offsethight；
mouseDown=false；
功能鼠标（evt）{
var center_x，center_y，mouse_x，mouse_y，弧度，度数；
evt.preventDefault（）；
if（mouseDown==true）{
中心x=（偏移量Ft）+（偏移量Dt/2）；
中心y=（偏移量）+（偏移量/2）；
鼠标_x=evt.pageX；
鼠标_y=evt.pageY；
弧度=Math.atan2（鼠标x-中心x，鼠标y-中心y）；
度=（弧度*（180/数学圆周率）*-1）+90；
el.style.webkitttransform='旋转（'+度+'度）'；
el.style.MozTransform='旋转（'+度+'度）'；
el.style.msTransform='旋转（'+度+'度）'；
el.style.OTransform='旋转（'+度+'度）'；
el.style.transform='旋转（'+度+'度）'；
}
}
el.addEventListener（“鼠标向下”，函数（）{
mouseDown=true；
el.addEventListener（“mousemove”，mouse，false）；
}，假）；
el.addEventListener（“鼠标”，函数（）{
mouseDown=false；
})
函数getOffset（el）{
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x}；
}

.content{
宽度：900px；
保证金：0自动；
边框：1px实心#DA574A；
}
.集装箱{
位置：相对位置；
宽度：25em；
高度：25公分；
填充物：2.8em；
背景色：#ccc；
保证金：0自动；
}
.circle-24、.circle-12、.center、#切换器{
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
位置：绝对位置；
边界半径：50%；
}
.圆圈-24{
宽度：20em；
高度：20em；
z指数：2；
背景色：#fff；
}
.圆圈-12{
宽度：15em；
高度：15公分；
z指数：3；
背景色：#ff0；
}
.中心{
宽度：0.5em；
高度：0.5em；
z指数：5；
背景色：红色；
}
#切换器{
高度：300px；
宽度：300px；
z指数：4；
背景色：#d6dceb；
}
.旋转器{
位置：绝对位置；
宽度：150px；
高度：2倍；
左：150px；
顶部：150px；
}
.旋转器.手{
位置：绝对位置；
光标：指针；
宽度：110px；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,40,160,0.12）；
过渡：.4s；
}
.旋转器.指针{
位置：绝对位置；
内容：“；
高度：40px；
宽度：40px；
右：0px；
底部：-20px；
边界半径：40px；
背景色：rgba（0,40,160,0.12）；
}
.circle-12分区、.circle-24分区{
宽度：2米；
高度：2米；
背景色：#DA574A；
}

---

首先向上和向左平移对象，然后进行旋转

var el、offsetTop、offsetft、offsetWdt、offsetHit、mouseDown；
el=document.getElementById（'switcher'）；
var offset=getOffset（el）；
offsetTop=offset.top；
offsetLft=offset.left；
offsetWdt=el.offsetWidth；
offsetHit=el.offsethight；
mouseDown=false；
功能鼠标（evt）{
var center_x，center_y，mouse_x，mouse_y，弧度，度数；
evt.preventDefault（）；
if（mouseDown==true）{
中心x=（偏移量Ft）+（偏移量Dt/2）；
中心y=（偏移量）+（偏移量/2）；
鼠标_x=evt.pageX；
鼠标_y=evt.pageY；
弧度=Math.atan2（鼠标x-中心x，鼠标y-中心y）；
度=（弧度*（180/数学圆周率）*-1）+90；
el.style.webkitttransform='平移（-50%，-50%）旋转（'+度+'度）'；
el.style.MozTransform='平移（-50%，-50%）旋转（'+度+'度）'；
el.style.msTransform='平移（-50%，-50%）旋转（'+度+'度）'；
el.style.OTransform='平移（-50%，-50%）旋转（'+度+'度）'；
el.style.transform='平移（-50%，-50%）旋转（'+度+'度）'；
}
}
el.addEventListener（“鼠标向下”，函数（）{
mouseDown=true；
el.addEventListener（“mousemove”，mouse，false）；
}，假）；
el.addEventListener（“鼠标”，函数（）{
mouseDown=false；
})
函数getOffset（el）{
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x}；
}

.content{
宽度：900px；
保证金：0自动；
边框：1px实心#DA574A；
}
.集装箱{
位置：相对位置；
宽度：25em；
高度：25公分；
填充物：2.8em；
背景色：#ccc；
保证金：0自动；
}
.circle-24、.circle-12、.center、#切换器{
左：50%；
最高：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
位置：绝对位置；
边界半径：50%；
}
.圆圈-24{
宽度：20em；
高度：20em；
z指数：2；
背景色：#fff；
}
.圆圈-12{
宽度：15em；
他