[英]Center of the div - center point
How do I make the center of the div as the center point for the rotation. 如何将div的中心作为旋转的中心点。
I came across this while I was doing some research but I can't seem to fit it in to mine. 我在做一些研究时遇到了这个问题 ,但我似乎无法适应它。
This is what the post has suggested. 这是该职位的建议。 But doesn't work.
但是不起作用。
$(area).css('-webkit-transform-origin', 'rotate(' + dgR + 'deg)');
function rot(e, area) {
var offset = area.offset();
var ceX = (offset.left) + ($(area).width() /2);
var ceY = (offset.top) + ($(area).height() /2);
var muX = e.pageX;
var muY = e.pageY;
var rdi = Math.atan2(muX-ceX, muY-ceY);
var dgR = (rdi * (180/Math.PI)*-5);
$(area).css('transform', 'rotate(' + dgR + 'deg)');
$(area).css('-webkit-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-o-transform', 'rotate(' + dgR + 'deg)');
$(area).css('-ms-transform', 'rotate(' + dgR+'deg)');
}
You're using the transform-origin incorrect. 您使用的transform-origin不正确。
$(area).css('-webkit-transform-origin', '50% 50%');
This should place the rotation origin point in the middle of the area
这应该将旋转原点放置在
area
的中间
When I got you right, you just want to rotate a div in it's center point, aren't you? 当我说对了,您只想在其中心点旋转一个div,不是吗? Here you have to define the center point with
transform-origin: 50% 50%;
在这里,您必须使用
transform-origin: 50% 50%;
定义中心点transform-origin: 50% 50%;
in your div. 在您的div中
Heres a fiddle to play around (without jscript): http://jsfiddle.net/nub0umft/ 这里是一个小提琴演奏(没有jscript): http : //jsfiddle.net/nub0umft/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.