Center of the div - center point

Question

How do I make the center of the div as the center point for the rotation.

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

Answer 1

You're using the transform-origin incorrect.

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

This should place the rotation origin point in the middle of the area

Answer 2

When I got you right, you just want to rotate a div in it's center point, aren't you? Here you have to define the center point with transform-origin: 50% 50%; in your div.

Heres a fiddle to play around (without jscript): http://jsfiddle.net/nub0umft/