JSFiddle - React, Tailwind, and code Playground

zoom-out limited to original frame borders - example3 for SO answer: http://stackoverflow.com/questions/11504703/css3-zooming-on-mouse-cursor/15296290#15296290

by Martin Turjak

HTML

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

CSS

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

JavaScript

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

/***************************************************** 
 * Transformations
 ****************************************************/
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) + "," + t.getTranslateX().toFixed(1) +"," +...