div的中心-中心点

Question

如何将div的中心作为旋转的中心点。

我在做一些研究时遇到了这个问题 ，但我似乎无法适应它。

这是该职位的建议。 但是不起作用。 $(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)');
}

Answer 1

您使用的transform-origin不正确。

$(area).css('-webkit-transform-origin', '50% 50%');

这应该将旋转原点放置在area的中间

Answer 2

当我说对了，您只想在其中心点旋转一个div，不是吗？ 在这里，您必须使用transform-origin: 50% 50%;定义中心点transform-origin: 50% 50%; 在您的div中

这里是一个小提琴演奏（没有jscript）： http : //jsfiddle.net/nub0umft/