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/