Lens not synchronized to the image with 90 degrees of rotation

[rafaelcb21]

I am using rotate but when I use 90 degrees or 270 degrees, the lens doesn't match.

Do you know how to solve this problem?

The lens is behaving very strange, it looks like I am moving the image in the opposite direction, I am moving up in the image, but I am moving the mouse down.

Below is the blowup code along with the rotate:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="margin-top: 100px;">
            <img id="target" style="margin-left: 160px; " src="https://iili.io/0hL7ou.png">
        </div>
        
        <button onclick="rotateImage()">Rotate</button>
        
        <script>

            function zoom(x, y) {
                
                var top = 8;
                var left = 168;
                var width = 599.344;
                var height = 500;
                var nativeWidth = 742;
                var nativeHeight = 619;

                var lensX = x - (200 / 2);
                var lensY = y - (200 / 2);

                var relX = x - left;
                var relY = y - top;

                var zoomX = -Math.floor(((relX / width) * nativeWidth) - (200 / 2));
                var zoomY = -Math.floor(((relY / height) * nativeHeight) - (200 / 2));

                var backPos180 = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                var backPos360 = zoomX + "px " + zoomY + "px";

                return [zoomX, zoomY, backPos180, backPos360]

            }

            var statusRotate = 4;
            rotateImage();
            
            function rotateImage() {
                if (statusRotate == 1) {
                    imageLen('90', '90');
                    statusRotate = 2
                } else if (statusRotate == 2){
                    imageLen('180', '-180')
                    statusRotate = 3
                } else if (statusRotate == 3){
                    imageLen('270', '270')
                    statusRotate = 4
                } else if (statusRotate == 4){
                    imageLen('360', '360')
                    statusRotate = 1
                } 
            }

            function imageLen(x, y){
                var degrees_image = x;
                var degrees_image_native = y;

                var $element = $('#target');
                $element.css({
                    'transform': 'rotate('+ degrees_image +'deg)'
                }); // 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();

                var left = $('#target').offset().left;
                var top = $('#target').offset().top;

                // Relative coordinates of image
                var relX = e.pageX - left;
                var relY = e.pageY - top;

                var nativeImageWidth = NATIVE_IMG.width;
                var nativeImageHeight = NATIVE_IMG.height;

                // 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);



                if(degrees_image == '90') {
                    var backPos = "calc(100% - " + zoomY + "px) calc(100% - " + zoomX + "px)";
                    //var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                    //
                } else if(degrees_image == '180') {
                    var backPos = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '270') {
                    var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '360') {
                    var backPos = zoomX + "px " + 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('+ degrees_image_native +'deg)' //rotate the image original
                    });
                })

                // Hide magnification lens
                $element.mouseleave(function () {
                    $blowupLens.css("display", "none");
                });
            }      
        
        </script>
    </body>
</html>

[rafaelcb21]

It has been solved, follow the link: stackoverflow