javascript - 如何围绕图像中心旋转跨度？

Question

我有一个带有图像的 Canvas :

在图片的右侧，您可以看到一个带有刷新图标的白色方 block ，黑色圆圈稍微隐藏了一点。我是这样创建的:

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)";
};

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

您可以看到除了带有刷新图标的白色方 block 外，所有内容都在旋转。它只是围绕自己的中心点旋转。

问题

我如何围绕图像的中心点旋转那个白色方 block (我创建的 span 元素)？

Answer 1

您可以使用transform-origin 来设置旋转中心。这是一个工作演示。请注意，此属性可能不适用于旧版本的网络浏览器 transform origin

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.square{
    background:black;
    width:30px;
    height:30px;
   -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
        -webkit-transform-origin: 100px 100px;
    
}

<div class="square"></div>