title: How can I recreate my jQuery .animate() element zoom/pan using css transform?
body: <p>I have put together a jsFiddle to illustrate my question:</p>
  
  <p><a href="http://jsfiddle.net/VbCcA/3/" rel="nofollow">http://jsfiddle.net/VbCcA/3/</a></p>
  
  <p>I have a function which will pan and zoom to a specified element.  This is used to create the transition between frames in a comic-book.</p>
  
  <p>I have this working fine using jQuery's .animate(), but I would like to use css transforms when available as they perform significantly better on modern browsers.</p>
  
  <p>However I cannot seem to correctly recreate the same behaviour.</p>
  
  <p>Rather than describe it poorly here, if you take a look at the jsFiddle you will see two sets of controls, with each button corresponding to a frame in the 'comic'.  the jQuery animate controls behave correctly and the css transform controls do not.</p>
  
  <p>The problem appears to be down to the measuring of the offset() attributes once an element has been scaled using css-transforms.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p><strong>NOTE:</strong> You will need to 're-run' the jsFiddle when switching method from .animate to transforms and vice-versa, in order to reset the CSS which is modified when the function runs.</p>
  
  <p><strong>EDIT:</strong> I have just corrected the link to the jSfiddle... Apologies to those that have already viewed it.  The original link was missing part of the example code.  Also just to clarify, I need to use percent based values as the whole app is fully responsive.</p>