Как повернуть пролет вокруг центра изображения?

Question

У меня есть холст с изображением:

На правой стороне изображения вы можете увидеть белый квадрат со значком обновления немного скрытую черным кружком. Я создал это так:

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

Теперь, когда я повернуть мое изображение:

вы можете увидеть, что все вращается, кроме белый квадрат с иконкой обновления. Он просто вращается вокруг своей центральной точки.

Вопрос

Как я вращать, что белый квадрат (элемент пядь я создал) вокруг центральной точки моего изображения?

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>