Zoom to point

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

HTML

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

CSS

html, body {
    margin: 0;
    padding: 0;
}

#container {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0 0 0;
    transition: transform 0.3s;
    transition-timing-function: ease-in-out;
    transform: translate(0,0) scale(1);
}

#item {
    position: absolute;
}

JavaScript

var current = {x: 0, y: 0, zoom: 1},
    con = document.getElementById('container');
    
window.onclick = function(e) {
    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 1.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
        /// make sure we take mouse pointer offset into account!
        cx = (ix + (e.clientX - ix) - nx),
        cy = (iy + (e.clientY - iy) - ny)
    ;
    // update current
    current.zoom = nz;
    current.x = cx;
    current.y = cy;
    /// make sure we translate before scale!
    con.style.transform
        = 'translate('+cx+'px, '+cy+'px) '
        + 'scale('+nz+')'
    ;
};