CSS3 mousewheel zooming

parent frame with hidden overflow - example 4 in SO answer: http://stackoverflow.com/questions/11504703/css3-zooming-on-mouse-cursor/15296290#15296290

by colemande

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/mousewheel.jquery.json"></script>
<script src="http://rawgithub.com/brandonaaron/jquery-mousewheel/a6e8b73e45b11ad63bec6119de83991071a38109/jquery.mousewheel.js"></script>
<body>
<div id="container"></div>
<div id="frame">
    <div id="drawing"></div>
</div>
<div id="screen"></div>
</body>

CSS

#screen{
    position:absolute;
    width:100px;
    height:100px;
    border:solid 3px red;
    top:298px;
    left:448px;
    
    pointer-events:none;
}
#container{
    position: absolute;
            top: 50px; 
            left: 50px;
            width:900px;
            height:600px;
            overflow:hidden;
    background-color:blue;
}

#frame {
            position: absolute;
            top: 50px; 
            left: 50px;
            width:auto;
            height:auto;
            
}

#drawing {
            z-index: 0;
            background: blue url(http://catmacros.files.wordpress.com/2009/09/cats_banzai.jpg) no-repeat;
            background-position: 50% 50%;
            height:350px;
            width:500px;
        }

JavaScript

// zooming on mouse cursor with adjusting -transform-origin
// moving the zooming frame with the -transfrorm matrix 

/***************************************************** 
 * Transformations
 ****************************************************/
$('#frame').draggable({ containment: $('#container') });

function Transformations(originX, originY, translateX, translateY, scale){
    this.originX = originX;
    this.originY = originY;
    this.translateX = translateX;
    this.translateY = translateY;
    this.scale = scale;
}

/* Getters */
Transformations.prototype.getScale = function(){ return this.scale; }
Transformations.prototype.getOriginX = function(){ return this.originX; }
Transformations.prototype.getOriginY = function(){ return this.originY; }
Transformations.prototype.getTranslateX = function(){ return this.translateX; }
Transformations.prototype.getTranslateY = function(){ return this.translateY; }

/***************************************************** 
 * Zoom Pan Renderer
 ****************************************************/
function ZoomPanRenderer(elementId){
    this.zooming = undefined;
    this.elementId = elementId;
    this.current = new Transformations(0, 0, 0, 0, 1);
    this.last = new Transformations(0, 0, 0, 0, 1);
    new ZoomPanEventHandlers(this);
}

/* setters */
ZoomPanRenderer.prototype.setCurrentTransformations = function(t){ this.current = t; }
ZoomPanRenderer.prototype.setZooming = function(z){ this.zooming = z; }

/* getters */
ZoomPanRenderer.prototype.getCurrentTransformations = function(){ return this.current; }
ZoomPanRenderer.prototype.getZooming = function(){ return this.zooming; }
ZoomPanRenderer.prototype.getLastTransformations = function(){ return this.last; }
ZoomPanRenderer.prototype.getElementId = function(){ return this.elementId; }

/* Rendering */
ZoomPanRenderer.prototype.getTransform2d = function(t){
    var transform2d = "matrix(";
    transform2d+= t.getScale().toFixed(1) + ",0,0," + t.getScale().toFixed(1)...