JSFiddle - React, Tailwind, and code Playground
HTML
<div id="m">hello</div>
CSS
#m {
width:100px;
height:100px;
background:#999;
position:absolute;
top:0;
left:0;
-webkit-transform:translateY(100px);
}
JavaScript
var getTranslatedY = function (element) {
var transform = element.css("transform") || element.css("-webkit-transform") || element.css("-moz-transform");
if (transform == "none") {
return 0;
}
return parseInt((transform.match(/^matrix\(.*?(-?[\d.]+)\)$/) || [])[1]) || 0;
};
$('#m').on(
'click',
function () {
var element = $(this);
element.css('-webkit-transform', "translateY(" + (getTranslatedY(element) + 200) + "px)");
});