JSFiddle - React, Tailwind, and code Playground

CSS3 zoom in and out on transform-origin example 1 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="drawing"></div>
</body>

CSS

#drawing {
            position: absolute;
            top: 200px; 
            left: 200px; 
            right:0; 
            bottom:0;
            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

/***************************************************** 
 * Transformations
 ****************************************************/
function Transformations(translateX, translateY, scale){
    this.translateX = translateX;
    this.translateY = translateY;
    this.scale = scale;
}

/* Getters */
Transformations.prototype.getScale = function(){ return this.scale; }
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, 1);
    this.last = new Transformations(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.getTransform3d = function(t){
    var transform3d = "matrix3d(";
    transform3d+= t.getScale().toFixed(1) + ",0,0,0,";
    transform3d+= "0," + t.getScale().toFixed(1) + ",0,0,";
    transform3d+= "0,0,1,0,0,0,0,1)";
    return transform3d;
}

ZoomPanRenderer.prototype.getTransform2d = function(t){
    var transform3d = "matrix(";
    transform3d+= t.getScale().toFixed(1) + ",0,0," + t.getScale().toFixed(1) + ",0,0)";
    return transform3d;
}

ZoomPanRenderer.prototype.applyTransformations = function(t){
    var elem = $("#" +...