title: Zoom on tap/pinch on a div element using css transform translate and scale with hammerjs
body: <p>I have a container which can contain other div,p,image and other html elements.</p>
  
  <pre><code>&lt;div id="mycontainer"&gt;
     &lt;div&gt;This is a child div positioned on top middle&lt;/div&gt;
     &lt;p&gt;This is a paragraph position on the middle on container div&lt;/p&gt;
     &lt;!-- image positioned at the bottom --&gt;
      &lt;img src="image.jpg"&gt;&lt;/img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When i click (using mouse) or tap/pinch a portion of the #mycontainer div, i want to zoom the #mycontainer div with its contents(div,p,img) relative to the position of where the user clicked/tapped/pinched</p>
  
  <p>How do i do these in javascript/jquery using css transform translate() and scale()?</p>
  
  <p>Currently i know how to set it, it would be like this :</p>
  
  <pre><code>$('#mycontainer')
  .css('-moz-transform', 'scale(1) translate(0px, 0px)')
  .css('-webkit-transform', 'scale(1) translate(0px, 0px)')
  .css('-o-transform', 'scale(1) translate(0px, 0px)')
  .css('transform', 'scale(1) translate(0px, 0px)');
  </code></pre>
  
  <p>but i do not know on how to compute for the values in translate() when the user tap/pinch</p>
  
  <p><strong>UPDATE :</strong></p>
  
  <p>Answers here seems to be similar but it's using transform-origin 
  <a href="https://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate">Zoom in on a point (using scale and translate)</a></p>
  
  <p>I dont want to use transform-origin i just want to use transform:translate() and transform:scale()</p>
  
  <p>I want like this implementation in <a href="http://hammerjs.github.io/" rel="nofollow noreferrer">http://hammerjs.github.io/</a> home page demo.
  Try to pinch the white box and it will zoom and rotate. I don't need the code for rotate, just zoom</p>
  
  <p>Please Help!</p>