Buenas noches MVideros!
Vengo con un problema que no he podido solucionar desde hace aprox. 3 meses. Resulta que estoy desarrollando una app para movil con Cordova e Ionic. Uno de los apartados consiste en elegir una imagen con un dibujo gracioso que tiene un hueco en el rostro para colocar una imagen, el usuario en un espacio mueve con los dedos, también puede hacer pinch to zoom(más pequeña o más grande la imagen) y rotar la imagen. Todos esto con la librería Hammerjs que viene con Ionic que te permite manejar todo el tema multitouch.
Hasta aquí todo perfecto si no fuera porque si el transform-origin del elemento que muevo en cuestión no está puesto a top left no consigo obtener las coordenadas x,y correctas si no que por x consigo el extremo más cercano de la imagen respecto al borde de la pantalla del dispositivo, para muestra un botón:
http://jsfiddle.net/xmarston/9z4Lmy24/
Cuando el transform-origin está por defecto (50% 50%) obtengo la x que se observa en el fiddle. A parte de que como el origen de la transformación está en el centro de la imagen los valores que el translate toma una vez se escala la imagen son respecto al centro de la misma y por lo tanto los valores de x,y no son los esperados.
¿Hay una forma de que a la vez que se está moviendo, escalando y rotando cambiar el origen de la transformación para poder obtener las coordenadas correctas? Es que con el transform-origin a top left cuando el usuario escala o rota la imagen lo hace desde el punto de arriba a la izquierda de la imagen y es nefasta la experiencia porque se tienen que hacer muchas correcciones hasta poner correctamente la imagen en el sitio.