java 图片绕中心旋转_如何围绕图像中心旋转 Span ？

我有一个带图像的画布：

在图片的右侧，您可以看到一个带有刷新图标的白色正方形，有点被黑色圆圈隐藏 . 我创建了这样的：

var rotatorSpan = document.createElement("span");

rotatorSpan.id = _this.idRotator;

rotatorSpan.className = "glyphicons glyphicons-restart";

document.getElementById("canvas-overlay").appendChild(rotatorSpan);

在我的绘图功能：

this.drawRotator = function() {

var pivotX = _this.x + (_this.imageWidth / 2);

var pivotY = _this.y + (_this.imageHeight / 2);

var radius = Math.sqrt(Math.pow((_this.x - pivotX), 2) + Math.pow((_this.y - pivotY), 2));

var rotatorX = _this.x + (_this.imageWidth / 2) + radius;

var rotatorY = _this.y + (_this.imageHeight / 2) + (_this.indicatorRadius / 2);

_this.ctx.save();

_this.ctx.translate(pivotX, pivotY);

_this.ctx.rotate(_this.rotation);

_this.ctx.translate(-pivotX, -pivotY);

_this.ctx.beginPath();

_this.ctx.arc(rotatorX, rotatorY, this.indicatorRadius, 0, Math.PI * 2, false);

_this.ctx.closePath();

_this.ctx.fill();

_this.ctx.restore();

document.getElementById(_this.idRotator).style.position = "absolute";

document.getElementById(_this.idRotator).style.top = rotatorY + "px";

document.getElementById(_this.idRotator).style.left = rotatorX + "px";

document.getElementById(_this.idRotator).style.fontSize = "1em";

document.getElementById(_this.idRotator).style.backgroundColor = "#fff";

document.getElementById(_this.idRotator).style.border = "1px solid #000;";

document.getElementById(_this.idRotator).style.zIndex = 1000;

document.getElementById(_this.idRotator).style.transform = "rotate(" + _this.rotation + "rad)";

};

现在当我旋转我的照片时：

你可以看到一切都在旋转，除了带有刷新图标的白色方块 . 它只围绕自己的中心点旋转 .

The Question

如何围绕图像的中心点旋转白色方块(我创建的 Span 元素)？