title: Pinch to zoom with CSS3
body: <p>I'm trying to implement pinch-to-zoom gestures exactly as in Google Maps. I watched a talk by Stephen Woods - <a href="http://www.yuiblog.com/blog/2012/02/23/video-stephen-woods-html5-touch" rel="noreferrer">"Creating Responsive HTML5 Touch Interfaces”</a> - about the issue and used the technique mentioned. The idea is to set the transform origin of the target element at (0, 0) and scale at the point of the transform. Then translate the image to keep it centered at the point of transform. </p>
  
  <p>In my test code scaling works fine. The image zooms in and out fine between subsequent translations. The problem is I am not calculating the translation values properly. I am using jQuery and Hammer.js for touch events. How can I adjust my calculation in the transform callback so that the image stays centered at the point of transform?</p>
  
  <p>The CoffeeScript (<code>#test-resize</code> is a <code>div</code> with a background image)</p>
  
  <pre class="lang-js prettyprint-override"><code>image = $('#test-resize')
  
  hammer = image.hammer -&gt;
    prevent_default: true
    scale_treshold: 0
  
  width = image.width()
  height = image.height()
  toX = 0
  toY = 0
  translateX = 0
  translateY = 0
  prevScale = 1
  scale = 1
  
  hammer.bind 'transformstart', (event) -&gt;
  
    toX = (event.touches[0].x + event.touches[0].x) / 2
    toY = (event.touches[1].y + event.touches[1].y) / 2
  
  hammer.bind 'transform', (event) -&gt;
  
    scale = prevScale * event.scale
    shiftX = toX * ((image.width() * scale) - width) / (image.width() * scale)
    shiftY = toY * ((image.height() * scale) - height) / (image.height() * scale)
    width = image.width() * scale
    height = image.height() * scale
  
    translateX -= shiftX
    translateY -= shiftY
  
    css = 'translateX(' + @translateX + 'px) translateY(' + @translateY + 'px) scale(' + scale + ')'
    image.css '-webkit-transform', css
    image.css '-webkit-transform-origin', '0 0'
  
  hammer.bind 'transformend', () -&gt;
    prevScale = scale
  </code></pre>