JSFiddle - React, Tailwind, and code Playground

HTML

<p>Both squares should stay at the same place</p>
<button id="increase">transform x10</button><span id="curTrans">10</span>

<div id="extremeTransCon">
    <div id="extremeTransDiv"></div>
</div>
<div id="normalTransCon">
    <div id="normalTransDiv"></div>
</div>

CSS

div {
    padding:5px;
}
#extremeTransCon {
    transform: translate3d(-10px, 0px, 1px);
}
#extremeTransDiv {
    width:10px;
    height:10px;
    background-color:red;
    transform: translate3d(10px, 0px, 1px);
}
#normalTransCon {
    transform: translate3d(-100px, 0px, 1px);
}
#normalTransDiv {
    width:10px;
    height:10px;
    background-color:green;
    transform: translate3d(100px, 0px, 1px);
}

JavaScript

var curTransform = 10;
$("#increase").click(function (e) {
    console.log("increase");
    curTransform *= 10;
    $("#curTrans").text(curTransform);
    $("#extremeTransCon").css("transform", "translate3d(" + (-curTransform) + "px, 0px, 0px)");
    $("#extremeTransDiv").css("transform", "translate3d(" + (curTransform) + "px, 0px, 0px)");

});