Estoy tratando de hacer un mini juego donde hay un personaje parado de una posición a otra. cuando hago el personaje puede volver a la posición anterior, por supuesto el personaje debe cambiar de posición

esto es lo que hice hasta ahora

 if(mv=='next'){ var nxtpoint = parseInt(current)+1; var nxtpositionx =parseInt($("#pointmap-"+nxtpoint).attr('x')); var nxtpositiony = parseInt($("#pointmap-"+nxtpoint).attr('y')); var crntnxtbtn = $("#nxt-"+current); var crntprvbtn = $("#prv-"+current); var nxtbtn = $("#nxt-"+nxtpoint); var prvbtn = $("#prv-"+nxtpoint); charmv.css('transform','rotateY(0deg)'); charmv.animate({ "x": nxtpositionx+charpositionx, "y": nxtpositiony+charpositiony }, "slow" ); if(nxtbtn){ nxtbtn.css('display','block'); } prvbtn.css('display','block'); crntnxtbtn.css('display','none'); crntprvbtn.css('display','none'); } if(mv=='prev'){ var prvpoint = parseInt(current)-1; var prvpositionx = parseInt($("#pointmap-"+prvpoint).attr('x')); var prvpositiony = parseInt($("#pointmap-"+prvpoint).attr('y')); var crntnxtbtn = $("#nxt-"+current); var crntprvbtn = $("#prv-"+current); var nxtbtn = $("#nxt-"+prvpoint); var prvbtn = $("#prv-"+prvpoint); // charmv.css('transform','rotateX(180deg)'); // charmv.css('transform-origin','center'); charmv.css('transform','scale(-1, 1)') charmv.animate({ "x": prvpositionx+charpositionx, "y": prvpositiony+charpositiony }, "slow" ); if(prvbtn){ prvbtn.css('display','block'); } nxtbtn.css('display','block'); crntnxtbtn.css('display','none'); crntprvbtn.css('display','none'); }

pero el flip cambia la posición del personaje y no está donde debería estar

Por favor ayuda