JSFiddle - React, Tailwind, and code Playground

by Minh Nguyen

HTML

<div id="transformed">This is transformed</div>
<div>Left: <span id="lefts"></span></div>
<div>Top: <span id="tops"></span></div>

CSS

#transformed {
width: 100px;
height: 100px;
background-color: #c00;
-webkit-transform: translate3d(150px,20px,10px);
}

div {margin-top: 30px;}

JavaScript

window.addEventListener('load', function(){
  var curTransform = new   WebKitCSSMatrix(window.getComputedStyle(transformed).webkitTransform);
  lefts.innerHTML = transformed.offsetLeft + curTransform.m41;
  tops.innerHTML = transformed.offsetTop + curTransform.m42;
});