Zoom to point

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

HTML

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

CSS

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

#page-setting {
    position: relative;
    margin: 50px;
}

#container {
    position: absolute;
    left: 21px;
    top: 22px;
    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 : 2,
        delm = document.documentElement,
        oz = current.zoom,
        nz = current.zoom * coef,
        /// scroll offset
        sx = delm.scrollLeft,
        sy = delm.scrollTop,
        /// offset of container
        ox = 50 + 21,
        oy = 50 + 22,
        /// 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+')'
    ;
};