Styjun

Double or Take game

Pressure inside an infinite ocean?

Why is Arya visibly scared in the library in S8E3?

How long would it take for people to notice a mass disappearance?

I have a unique character that I'm having a problem writing. He's a virus!

Verb "geeitet" in an old scientific text

Did we get closer to another plane than we were supposed to, or was the pilot just protecting our delicate sensibilities?

How can I get a job without pushing my family's income into a higher tax bracket?

Prove that the limit exists or does not exist

Are there any Final Fantasy Spirits in Super Smash Bros Ultimate?

Missing Piece of Pie - Can you find it?

How to apply differences on part of a list and keep the rest

Should I mention being denied entry to UK due to a confusion in my Visa and Ticket bookings?

Can a nothic's Weird Insight action discover secrets about a player character that the character doesn't know about themselves?

Would glacier 'trees' be plausible?

Make some Prime Squares!

In Avengers 1, why does Thanos need Loki?

Set collection doesn't always enforce uniqueness with the Date datatype? Does the following example seem correct?

Why Isn’t SQL More Refactorable?

How wide is a neg symbol, how to get the width for alignment?

How was the quadratic formula created?

Can Infinity Stones be retrieved more than once?

Fitch Proof Question

Point of the the Dothraki's attack in GoT S8E3?

Rotating an HTML element with mouse (or mouseevent) with CSS zoom applied

Adding HTML entities using CSS contentHow to apply CSS to iframe?Convert HTML + CSS to PDF with PHP?Retrieve the position (X,Y) of an HTML elementHow to apply !important using .css()?CSS selector for first element with classHow can I set the default value for an HTML <select> element?Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQueryIs it possible to apply CSS to half of a character?Moving image with cursor (parent being transform/css rotated)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I've found an example of rotating an HTML element in an old SO question:

http://jsfiddle.net/superasn/w48rsvp2/

Unforunatately as soon as I apply any zoom (style="zoom:0.5") to the parent element the rotation becomes wonky.

http://jsfiddle.net/superasn/mv2oqL36/2/ (with zoom of 0.5 and offset of 500px on parent element)

The code for rotation is like this

$(document).ready(function() 
 // the same as yours.
 function rotateOnMouse(e, pw) 
 var offset = pw.offset();
 var center_x = (offset.left) + ($(pw).width() / 2);
 var center_y = (offset.top) + ($(pw).height() / 2);
 var mouse_x = e.pageX;
 var mouse_y = e.pageY;
 var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
 var degree = (radians * (180 / Math.PI) * -1) + 100;
 // window.console.log("de="+degree+","+radians);
 $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 

 $('.drop div img').mousedown(function(e) 
 e.preventDefault(); // prevents the dragging of the image.
 $(document).bind('mousemove.rotateImg', function(e2) 
 rotateOnMouse(e2, $('.drop div img'));
 );
 );

 $(document).mouseup(function(e) 
 $(document).unbind('mousemove.rotateImg');
 );
);

I think the rotateOnMouse function needs to factor the CSS zoom of parent somehow but I can't figure it out.

My questions is what changes I need to make in rotateOnMouse function to calculate degree variable after zoom?

javascript jquery html css css-transforms

share|improve this question

edited Mar 23 at 2:46

supersan

asked Mar 22 at 22:20

supersansupersan

1,8341838

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  P.S. I've tried diving center_x and center_y with zoom (so center_x/2 for zoom 0.5) and it makes it work a little but the rotation isn't very smooth.
  
  – supersan
  Mar 22 at 22:28
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Updating the center during rotation made it wonky when hovering the image, even without the zoom. Seems to work better when defining it beforehand, accounting for the zoom level is rather simple - use it as an extra factor when calculating the center. Here's a demo.
  
  – Shikkediel
  Mar 22 at 23:50
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks it does seem to work with the changes you've made!
  
  – supersan
  Mar 23 at 0:16
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  No problem, I noticed zoom doesn't actually work in Firefox but I don't see any real adverse effect either. Might be worth checking into though, possibly use scale instead.
  
  – Shikkediel
  Mar 23 at 0:20
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Not as simple as I thought it was apparently, my earlier approach seemed to be working (and logical) but it was likely a fluke. The clue is actually in the pageX and pageY events I think. Demo here. It's pretty terrible on Firefox now though.
  
  – Shikkediel
  Mar 23 at 4:53
  
  

  
  
  
  

 | 
show 1 more comment

0

I've found an example of rotating an HTML element in an old SO question:

http://jsfiddle.net/superasn/w48rsvp2/

Unforunatately as soon as I apply any zoom (style="zoom:0.5") to the parent element the rotation becomes wonky.

http://jsfiddle.net/superasn/mv2oqL36/2/ (with zoom of 0.5 and offset of 500px on parent element)

The code for rotation is like this

$(document).ready(function() 
 // the same as yours.
 function rotateOnMouse(e, pw) 
 var offset = pw.offset();
 var center_x = (offset.left) + ($(pw).width() / 2);
 var center_y = (offset.top) + ($(pw).height() / 2);
 var mouse_x = e.pageX;
 var mouse_y = e.pageY;
 var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
 var degree = (radians * (180 / Math.PI) * -1) + 100;
 // window.console.log("de="+degree+","+radians);
 $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 

 $('.drop div img').mousedown(function(e) 
 e.preventDefault(); // prevents the dragging of the image.
 $(document).bind('mousemove.rotateImg', function(e2) 
 rotateOnMouse(e2, $('.drop div img'));
 );
 );

 $(document).mouseup(function(e) 
 $(document).unbind('mousemove.rotateImg');
 );
);

I think the rotateOnMouse function needs to factor the CSS zoom of parent somehow but I can't figure it out.

My questions is what changes I need to make in rotateOnMouse function to calculate degree variable after zoom?

javascript jquery html css css-transforms

share|improve this question

edited Mar 23 at 2:46

supersan

asked Mar 22 at 22:20

supersansupersan

1,8341838

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  P.S. I've tried diving center_x and center_y with zoom (so center_x/2 for zoom 0.5) and it makes it work a little but the rotation isn't very smooth.
  
  – supersan
  Mar 22 at 22:28
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Updating the center during rotation made it wonky when hovering the image, even without the zoom. Seems to work better when defining it beforehand, accounting for the zoom level is rather simple - use it as an extra factor when calculating the center. Here's a demo.
  
  – Shikkediel
  Mar 22 at 23:50
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks it does seem to work with the changes you've made!
  
  – supersan
  Mar 23 at 0:16
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  No problem, I noticed zoom doesn't actually work in Firefox but I don't see any real adverse effect either. Might be worth checking into though, possibly use scale instead.
  
  – Shikkediel
  Mar 23 at 0:20
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Not as simple as I thought it was apparently, my earlier approach seemed to be working (and logical) but it was likely a fluke. The clue is actually in the pageX and pageY events I think. Demo here. It's pretty terrible on Firefox now though.
  
  – Shikkediel
  Mar 23 at 4:53
  
  

  
  
  
  

 | 
show 1 more comment

I've found an example of rotating an HTML element in an old SO question:

http://jsfiddle.net/superasn/w48rsvp2/

Unforunatately as soon as I apply any zoom (style="zoom:0.5") to the parent element the rotation becomes wonky.

http://jsfiddle.net/superasn/mv2oqL36/2/ (with zoom of 0.5 and offset of 500px on parent element)

The code for rotation is like this

$(document).ready(function() 
 // the same as yours.
 function rotateOnMouse(e, pw) 
 var offset = pw.offset();
 var center_x = (offset.left) + ($(pw).width() / 2);
 var center_y = (offset.top) + ($(pw).height() / 2);
 var mouse_x = e.pageX;
 var mouse_y = e.pageY;
 var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
 var degree = (radians * (180 / Math.PI) * -1) + 100;
 // window.console.log("de="+degree+","+radians);
 $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 

 $('.drop div img').mousedown(function(e) 
 e.preventDefault(); // prevents the dragging of the image.
 $(document).bind('mousemove.rotateImg', function(e2) 
 rotateOnMouse(e2, $('.drop div img'));
 );
 );

 $(document).mouseup(function(e) 
 $(document).unbind('mousemove.rotateImg');
 );
);

I think the rotateOnMouse function needs to factor the CSS zoom of parent somehow but I can't figure it out.

My questions is what changes I need to make in rotateOnMouse function to calculate degree variable after zoom?

javascript jquery html css css-transforms

share|improve this question

edited Mar 23 at 2:46

supersan

asked Mar 22 at 22:20

supersansupersan

1,8341838

$(document).ready(function() 
 // the same as yours.
 function rotateOnMouse(e, pw) 
 var offset = pw.offset();
 var center_x = (offset.left) + ($(pw).width() / 2);
 var center_y = (offset.top) + ($(pw).height() / 2);
 var mouse_x = e.pageX;
 var mouse_y = e.pageY;
 var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
 var degree = (radians * (180 / Math.PI) * -1) + 100;
 // window.console.log("de="+degree+","+radians);
 $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
 $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
 

 $('.drop div img').mousedown(function(e) 
 e.preventDefault(); // prevents the dragging of the image.
 $(document).bind('mousemove.rotateImg', function(e2) 
 rotateOnMouse(e2, $('.drop div img'));
 );
 );

 $(document).mouseup(function(e) 
 $(document).unbind('mousemove.rotateImg');
 );
);

share|improve this question

edited Mar 23 at 2:46

supersan

asked Mar 22 at 22:20

supersansupersan

1,8341838

share|improve this question

edited Mar 23 at 2:46

supersan

asked Mar 22 at 22:20

supersansupersan

1,8341838

asked Mar 22 at 22:20

supersansupersan

1,8341838

asked Mar 22 at 22:20

supersansupersan

1,8341838