0

I have a school homework where I have this issue: if you start to rotate the image, then move the mouse out of the gray area and back into the area again, but at a different location, the image "jumps": it undergoes a major rotation change. I need to avoid this inconvenience.

function init(JQuery) {
  let coordX = JQuery.pageX;
  let coordY = JQuery.pageY;

  $(".zoneSouris").mousemove(function(event) {
    if (event.buttons == 1) {
      $(".zoneImage").css({
        '-webkit-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
        '-moz-transform': 'rotateX(' + event.pageY + 'deg) rotateY(' + event.pageX + 'deg)',
      });
    } else if (event.buttons == 2) {
      $(".zoneImage").css({
        '-webkit-transform': 'rotate(0)',
        '-moz-transform': 'rotate(0)',
      });
    }
  });

  $(".zoneSouris").bind("contextmenu", function(e) {
    return false;
  });
}

init($);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="espaceRotation">
    <div class="elemEspace zoneImage">
      <img src="https://i.imgur.com/eNqPru1.png" />
    </div>
    <div class="elemEspace zoneSouris">
      <span>Manipulez avec la souris !</span>
    </div>
  </div>
</main>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Victor Colin
  • 1
  • It dont work for me, ff or Chrome :/ No rotation – SKJ Nov 25 '21 at 11:51
  • 1
    @SKJ you need to click and drag on the text – Rory McCrossan Nov 25 '21 at 12:00
  • Not directly relevant, but you should use: [disable text highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) – freedomn-m Nov 25 '21 at 12:07
  • Your requirements are a little unclear. Should the image rotation be based on where you click the mouse or how far you move the mouse? At the moment it's where you click/move the mouse so if you start to move on the left then stop and start to move on the right, it jumps to the right. But if it's supposed to be based on how far you move the mouse then it needs to be based on where you *start* (each time) not the page - and you won't get the jump because the start is always zero-delta. If it's supposed to be based on the page, then use `transition-duration` eg: https://jsfiddle.net/v475gzdu/ – freedomn-m Nov 25 '21 at 12:22
  • Hey thanks for the answer ! This could work but I don't think this is what I am supposed to do. Because with your solution, the image still teleport to another position but with a transition to "hide" the jumping effect. Instead I think i have to get the coordinates at the moment my mouse leave the area and then make a calculus with the new coordinates so as to prevent the jump. I have no idea how to process and I doubt i made a clear explanation lol, so feel free to ask if you still need more detail :) – Victor Colin Nov 26 '21 at 10:16

0 Answers0