Zoom to point

Mixture of JS and CSS to zoom to point on click. Answering http://stackoverflow.com/questions/27603929

by Tan

HTML

<div id="canvas">
<div id="zoom">
    <div id="item">
        <img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" />
    </div>
</div>
</div>

CSS

#canvas {width: 300px; height: 300px;margin:auto;overflow:scroll;}
#zoom img {display:block;overflow:scroll;}
#zoom {

    transition: transform 0.3s;

   
}
#item {

}

JavaScript

var current = {x: 0, y: 0, zoom: 1},
    con = document.getElementById('zoom');

window.onclick = function(e) {
    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,
        oz = current.zoom,
        nz = (current.zoom *= coef),
        /// calculate click at current zoom
        ix = (e.clientX - current.x) / oz,
        iy = (e.clientY - current.y) / oz,
        /// calculate click at new zoom
        nx = ix * nz,
        ny = iy * nz,
        /// move to the difference
        cx = (current.x = ix - nx),
        cy = (current.y = iy - ny)
    ;
    /// make sure we translate before scale!
    con.style.transform
        = 'translate('+cx+'px, '+cy+'px) '
        + 'scale('+nz+')'
    ;
};