JSFiddle - React, Tailwind, and code Playground

HTML

<div id="normal"class="btn">normal</div>
<div id="x2" class="btn">x2</div>
<div id="result"></div>

<div class="clearfix"></div>

<div id="zoom_div"></div>

CSS

#zoom_div{
    position:absolute;
    width:100px;
    height:100px;
    top:0px;
    left:0px;
    background-color:#000000;
    -webkit-transform: translate3d(20px, 20px, 0) scale(1);
}

#normal{
    position:absolute;
    left:10px;
    top: 150px;
    width:100px;
    text-align:center;
}

#x2{
    position:absolute;
    left: 130px;
    top: 150px;
}

#result{
    position:absolute;
    padding:10px;
    left: 10px;
    top: 200px
}

.btn{
    float:left;
    border:1px solid black;
    padding:5px;
    margin-top:10px;
    margin-right:10px;
    cursor:pointer;
}

.btn:hover{
    background:#000000;
    color:#FFFFFF;
}

.clearfix{
    clear:both;
}

JavaScript

$("#x2").on("click", function(e){
    var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
    var x = Math.floor(transform.e);
    var y = Math.floor(transform.f);
    
  $("#zoom_div").css("transform", "translate3d(" + x + "px," + y + "px,0) scale(2)"); 
});

$("#normal").on("click", function(e){
   $("#zoom_div").css("transform", "translate3d(0,0,0) scale(1)"); 
});

var offset = {}
var mdown = false;
var scale = 0;

$("#zoom_div").on("mousedown", function(e){
     var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
    
    var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;

    var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
    
    offset = {
        "x" : x * scale,
        "y" : y * scale
    }
    
    mdown = true;
});


$("#zoom_div").on("mouseup", function(){
    mdown = false;
});

$(document).on("mousemove", function(e){
    if(mdown == true){
        var div_x = e.pageX - offset.x;
        var div_y = e.pageY - offset.y;
        
        $("#result").html(div_x);
        
        $("#zoom_div").css({
            "-webkit-transform" : "translate3d(" + div_x + "px, " + div_y + "px, 0) scale(" + scale + ")"
        });
    }
   
});