I am trying to 3d move a picture. When I'm past half the picture the mouse offsetX should be positive but else should be increase a negative way. How can i do that for rotate degree?

My experiment like that:

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The issue was that you had mouseX = 0 on the left, so at that point you should compute mouseX - the distance (so, mouseX - image width / 2, i.e. -200 for example), then convert it to positive for the angle and add a - to the degree.

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

My last code like that for smooth transition:

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

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>