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://fadili.users.greyc.fr/demos/WaveRestore/EMInpaint/parrot_original.png" />
    </div>
</div>

CSS

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

#container {
    position: absolute;
    left: 300px;
    top: 42px;
    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,
        delm = document.documentElement,
        oz = current.zoom,
        nz = current.zoom * coef,
        /// scroll offset
        sx = delm.scrollLeft,
        sy = delm.scrollTop,
        /// offset of container
        ox = 300,
        oy = 42,
        /// mouse cords
        mx = e.clientX - ox + sx,
        my = e.clientY - oy + sy,
        /// calculate click at current zoom
        ix = (mx - current.x) / oz,
        iy = (my - 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 + (mx - ix) - nx),
        cy = (iy + (my - 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+')'
    ;
};