Matrix scale/translate from point
<p>I'm attempting to scale an image and have it translate correctly from an origin point (basically a pinch to zoom). I'm trying to find a solution that doesn't involve changing <code>transform-origin</code>, because it will complicate finding the left/top edges of the picture, which I'm using for more than just this problem.</p>

<p>This is more of a math problem. <strong>I'm having trouble coming up with an equation to determine how much to translate the image, based on an origin. The current equation I have worked out does not scale from a point correctly.</strong> In regards to the demo, the image should <em>blow up</em> from the mouse pointer when scrolling with the mouse.</p>

<p>I'm not looking for a workaround, or an alternative design. As stated before, I can't modify the transform-origin property.</p>

<p>Demo: <a href="https://jsfiddle.net/dook/ort0efjd/">https://jsfiddle.net/dook/ort0efjd/</a></p>

<p>Matrix transform function</p>

<pre><code>function transform() {
  var matrix = [dim.new_scale, 0, 0, dim.new_scale, dim.new_x, dim.new_y].join(",");

  image_center.css({
    "transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
    "-webkit-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
    "-moz-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
  });
}
</code></pre>

<p>Mousewheel event</p>

<pre><code>// Determine mousewheel pointer in relation to picture origin
var offset = image_center.offset();
var originX = ev.originalEvent.pageX - offset.left;
var originY = ev.originalEvent.pageY - offset.top;

// truncated --- new_scale is modified

// Translate based on pointer origin -- This is where I need help
dim.new_x = originX + dim.height * (dim.new_scale - 1);
dim.new_y = originY + dim.height * (dim.new_scale - 1);

// truncated -- Keep image within constraints

transform(); // Applies everything in dim to CSS transform matrix
</code></pre>