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">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">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">