Usé el complemento blowup.js como base, y estoy tratando de rotar la imagen y la lente para seguir la rotación. Pero no está funcionando.
Cuando pongo la rotación (90 grados), por ejemplo, la lente y la imagen no coinciden.
Alguien sabe como ayudarme?
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"); }); #target { margin-left: 160px; width: 400; height: 250px; } <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <img id="target" src="https://iili.io/0hL7ou.png"> </body>