Estoy tratando de mover una imagen en 3D. Cuando haya pasado la mitad de la imagen, el desplazamiento del mouse debería ser positivo, pero de lo contrario debería aumentar de manera negativa. ¿Cómo puedo hacer eso para rotar el grado?
Mi experimento así:
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let mouseX = event.offsetX; let itemWidth = $(this).width(); let degree = (10 * mouseX) / itemWidth;// For maximize to 10 degree let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree if (mouseX >= itemWidth/2) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' + degree + 'deg)'); $(this).css('box-shadow', '' + degree + 'px 0px 20px #fbe989'); }else{ $(this).css('transform', 'perspective(1000px) rotateY(' + negativeDegree+ 'deg)'); $(this).css('box-shadow', '' + negativeDegree + 'px 0px 20px #fbe989'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img">El problema era que tenía mouseX = 0 a la izquierda, por lo que en ese momento debería calcular mouseX - la distancia (por lo tanto, mouseX - ancho de imagen / 2, es decir, -200 por ejemplo), luego convertirlo en positivo para el ángulo y agregue un - al grado.
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let mouseX = event.offsetX; let itemWidth = $(this).width(); let half = itemWidth / 2; let degree = mouseX >= half ? ((10 * mouseX) / itemWidth) : (((-(mouseX - itemWidth)) * 10)/itemWidth); let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree if (mouseX >= half) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' + degree + 'deg)'); $(this).css('box-shadow', '' + degree + 'px 0px 20px #fbe989'); }else{ $(this).css('transform', 'perspective(1000px) rotateY(-' + degree+ 'deg)'); $(this).css('box-shadow', '-' + degree + 'px 0px 20px #fbe989'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img">Mi último código así para una transición suave:
$('#img').mousemove(function (event) { $(this).removeClass('transition-effect'); let itemWidth = $(this).width(); let mousesX = event.offsetX; let half = itemWidth / 2; let mouseX = mousesX >= half ? Math.abs((itemWidth - mousesX) - half) : -((itemWidth - mousesX) - half); //console.log(mouseX); let degree = ((10 * mouseX) / itemWidth) ; let negativeDegree = -((10 * mouseX) / itemWidth);// For get a negative degree //console.log((itemWidth - mouseX) - half); if (mouseX >= half) { // console.log(`itemWidth:${itemWidth/2} - mouseX:${mouseX}`); $(this).css('transform', 'perspective(1000px) rotateY(' + degree + 'deg)'); $(this).css('box-shadow', '-' + degree + 'px 0px 10px gray'); } else { $(this).css('transform', 'perspective(1000px) rotateY(' + degree + 'deg)'); $(this).css('box-shadow', '' + degree + 'px 0px 10px gray'); } }).mouseleave(function () { $(this).addClass('transition-effect'); $(this).css('box-shadow', '1px 0px 20px #c1c1c1'); $(this).css('transform', 'perspective(0) rotateY(0deg)'); }) .transition-effect{ transition: all 0.5s ease-in-out; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.cumhuriyet.com.tr/Archive/2021/8/3/1857648/kapak_173121.jpg" class="img-fluid img-thumbnail take-it" id="img">