Tengo este efecto de paralaje 3d cuando el mouse pasa sobre la tarjeta. Pero no sé cómo hacer que vuelva a su posición original cuando el mouse ya no está sobre él.
let cardParallx = document.querySelector('.card-active'); cardParallx.addEventListener('mousemove',(e)=>{ let x =(window.innerWidth/2 - e.pageX)/30; let y =(window.innerHeight/2 - e.pageY)/30; cardParallx.style.transform =`rotateX(${-y}deg) rotateY(${-x}deg)`; }); <div class="card-active"> <img src="https://placekitten.com/200/300"> </div>Intenta agregar esto a tu CSS :
.card-active { width: fit-content; }Y esto a su JavaScript para obtener cuando el mouse del usuario no está sobre el mouse y cambie la rotación de su imagen a la predeterminada:
cardParallx.addEventListener('mouseout', (e) => { let x =(window.innerWidth/2 - e.pageX)/30; let y =(window.innerHeight/2 - e.pageY)/30; cardParallx.style.transform =`rotateX(0) rotateY(0)`; });Para obtener algo así:
let cardParallx = document.querySelector('.card-active'); cardParallx.addEventListener('mousemove',(e)=>{ let x =(window.innerWidth/2 - e.pageX)/30; let y =(window.innerHeight/2 - e.pageY)/30; cardParallx.style.transform =`rotateX(${-y}deg) rotateY(${-x}deg)`; }); cardParallx.addEventListener('mouseout', (e) => { let x =(window.innerWidth/2 - e.pageX)/30; let y =(window.innerHeight/2 - e.pageY)/30; cardParallx.style.transform =`rotateX(0) rotateY(0)`; }); .card-active { width: fit-content } <div class="card-active"> <img src="https://placekitten.com/200/300"> </div>