¿Cómo puedo recrear mi jQuery .animate() elemento zoom/pan usando css transform?

Question

He reunido una jsFiddle para ilustrar mi pregunta:

http://jsfiddle.net/VbCcA/3/

que tienen una función que alejar o acercar a un elemento especificado. Esto se usa para crear la transición entre fotogramas en un cómic.

Funciono bien usando el .animate() de jQuery, pero me gustaría utilizar las transformaciones de CSS cuando estén disponibles, ya que tienen un rendimiento significativamente mejor en los navegadores modernos.

Sin embargo, parece que no puedo recrear correctamente el mismo comportamiento.

En lugar de describirlo mal aquí, si echa un vistazo al jsFiddle verá dos conjuntos de controles, con cada botón correspondiente a un marco en el 'comic'. los controles animados jQuery se comportan correctamente y los controles de transformación css no se comportan correctamente.

El problema parece deberse a la medición de los atributos de desplazamiento() una vez que un elemento ha sido escalado utilizando css-transformaciones.

Cualquier ayuda sería muy apreciada.

NOTA: Tendrá que volver a ejecutar el jsFiddle cuando cambie el método de .animate a las transformaciones y viceversa, para restablecer el CSS que se modifica cuando se ejecuta la función.

EDIT: Acabo de corregir el enlace al jSfiddle ... Disculpas a quienes ya lo han visto. Al enlace original le faltaba parte del código de ejemplo. También para aclarar, necesito usar valores basados ​​en porcentajes ya que toda la aplicación responde completamente.

Answer 1

Definitivamente no es la ruta más directa, pero considere aplicar jQuery Transit (http://ricostacruz.com/jquery.transit/) a su versión .animate solo para ver cómo maneja la conversión a la transformación CSS3. Entonces es posible que puedas trabajar hacia atrás desde allí.