title: How can I keep image and lens rotation 90deg synchronized?
body: <p>I used the blowup.js plugin as a base, and I am trying to rotate the image, and the lens to follow the rotation. But it is not working.</p>
  <p>When I put the rotate(90deg) for example, the lens and the image are mismatched.</p>
  <p>Anybody know how to help me?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $element = $('#target');
  $element.css({
    'transform': 'rotate(90deg)'
  }); // rotate imagem in html
  
  // Constants
  var $IMAGE_URL = $element.attr("src");
  var NATIVE_IMG = new Image();
  NATIVE_IMG.src = $element.attr("src");
  
  var lens = document.createElement("div");
  lens.id = "BlowupLens";
  $("body").append(lens);
  $blowupLens = $("#BlowupLens");
  
  $blowupLens.css({
    "position": "absolute",
    "display": "none",
    "pointer-events": "none",
    "zIndex": 999999,
    "width": 200,
    "height": 200,
    "border": "6px solid #FFF",
    "background": "#FFF",
    "border-radius": "50%",
    "box-shadow": "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
    "background-repeat": "no-repeat",
  });
  
  // Show magnification lens
  $element.mouseenter(function() {
    $blowupLens.css("display", "block");
  });
  
  // Mouse motion on image
  $element.mousemove(function(e) {
  
    // Lens position coordinates
    var lensX = e.pageX - (200 / 2);
    var lensY = e.pageY - (200 / 2);
  
    var width = $element.width();
    var height = $element.height();
  
    // Relative coordinates of image
    var relX = e.pageX - $('#target').offset().left;
    var relY = e.pageY - $('#target').offset().top;
  
    // Zoomed image coordinates 
    var zoomX = -Math.floor(relX / width * (NATIVE_IMG.width) - 200 / 2);
    var zoomY = -Math.floor(relY / height * (NATIVE_IMG.height) - 200 / 2);
  
    var backPos = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";
  
    // Apply styles to lens
    $blowupLens.css({
      left: lensX,
      top: lensY,
      "background-image": "url(" + encodeURI($IMAGE_URL) + ")",
      "background-size": backgroundSize,
      "background-position": backPos,
      "transform": "rotate(90deg)" //rotate the image original
    });
  })
  
  // Hide magnification lens
  $element.mouseleave(function() {
    $blowupLens.css("display", "none");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#target {
    margin-left: 160px;
    width: 400;
    height: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;img id="target" src="https://iili.io/0hL7ou.png"&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>