title: Pinch to zoom using Hammer.js
body: <p>I am trying to implement pinch to zoom using hammer.js</p>
  
  <p>Here's my HTML-</p>
  
  <pre><code> &lt;script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="pinchzoom"&gt;
          &lt;div&gt;
              &lt;img id="rect" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="2835" height="4289" ondragstart="return false" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's my SCRIPT</p>
  
  <pre><code>var hammertime = Hammer(document.getElementById('pinchzoom'), {
          transform_always_block: true,
          transform_min_scale: 1,
          drag_block_horizontal: false,
          drag_block_vertical: false,
          drag_min_distance: 0
      });
  
      var rect = document.getElementById('rect');
  
      var posX=0, posY=0,
          scale=1, last_scale,
          rotation= 1, last_rotation;
  
      hammertime.on('touch drag transform', function(ev) {
          switch(ev.type) {
              case 'touch':
                  last_scale = scale;
                  last_rotation = rotation;
                  break;
  
              case 'drag':
                  posX = ev.gesture.deltaX;
                  posY = ev.gesture.deltaY;
                  break;
  
              case 'transform':
                  rotation = last_rotation + ev.gesture.rotation;
                  scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
                  break;
          }
  
          // transform!
          var transform =
                  //"translate3d("+posX+"px,"+posY+"px, 0) " +
                  "scale3d("+scale+","+scale+", 0) ";
  
  
          rect.style.transform = transform;
          rect.style.oTransform = transform;
          rect.style.msTransform = transform;
          rect.style.mozTransform = transform;
          rect.style.webkitTransform = transform;
      });
  </code></pre>
  
  <p>It works fine but I am not able to scroll the image. On uncommenting transform3d it works but image looses its position on drag. I can't use jQuery.</p>