javascript - 当我用 mousemove 旋转图像时，我无法获得负 X 度

Question

我正在尝试 3d 移动图片。当我超过图片的一半时，鼠标 offsetX 应该为正值，否则应该以负值方式增加。我该怎么做才能旋转度数？

我的实验是这样的:

$('#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">

Answer 1

问题是您的左侧有 mouseX = 0，因此此时您应该计算 mouseX - 距离(因此，mouseX - 图像宽度/2，例如 -200)，然后将其转换为正值 Angular 并在度数上加上 -。

$('#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">