I have a canvas with an image:
On the right side of the picture you can see a white square with a refresh icon a little bit hidden by the black circle. I created this like that:
var rotatorSpan = document.createElement("span");
rotatorSpan.id = _this.idRotator;
rotatorSpan.className = "glyphicons glyphicons-restart";
document.getElementById("canvas-overlay").appendChild(rotatorSpan);
In my draw function:
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)";
};
Now when i rotate my picture:
you can see that everything is rotating except the white square with the refresh icon. It just rotates around its own center point.
The Question
How can i rotate that white square (the span element i created) around the center point of my image?
You can use transform-origin
to set center of rotation. Here is a working demo. Note that this property may not work in older versions of web browsers 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.