JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div id="test">
click me
</div>

<div class="RefreshIsWrong"></div>

<div class="Ugh"></div>

CSS

#test {
  width: 200px;
  height: 200px;
  border: 3px solid red;
  margin-left: 100px;
  transform: matrix(1, 0, 0, 1, 100, 100);
}

JavaScript

setInterval(function(){
var wtfbitch = Math.floor((Math.random() * 90) + 1);

$('#test').css('transform','matrix(1, 0, 0, 1, '+wtfbitch+', 100)');

var obj = $('#test');
var transformMatrix = obj.css('transform');
var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
var x = matrix[4]; // x
var y = matrix[5]; // y

$('#test').click(function() {
  $('.RefreshIsWrong').text(x+' | '+y);
});

 }, 500);
 
 
var obj = $('#test');
var transformMatrix = obj.css('transform');
var matrix = transformMatrix.replace(/[^0-9\-.,]/g, '').split(',');
var x = matrix[4]; //translate x
var y = matrix[5]; //translate y
 
 
$('#test').click(function() {
  $('.Ugh').text(x+' | '+y);
});