JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="transformed">I'm transformed</div>
<div class="notTransformed">I'm not transformed</div>

CSS

.transformed {
  transform:translate3d(0,-20px,100px) rotateZ(30deg);
  margin: 20px 10px 0 0;
}

JavaScript

$.fn.get3dTransforms = function() {
  let matrix = this.css('transform');
  console.log(matrix)
  if (matrix.indexOf('matrix') > -1 ) {
    matrix = matrix.split('(')[1]
          .split(')')[0]
          .replace(/\s/g, '')
          .split(',');          
   return {
      x:matrix[12] ? Number(matrix[12]):0,
      y:matrix[13] ? Number(matrix[13]):0,
      z:matrix[14] ? Number(matrix[14]):0
    }
  } 
  return { x:0, y:0, z:0 };
};

console.log(
  '.transformed: ', 
  $('.transformed').eq(0).get3dTransforms()
  )
console.log(
  '.notTransformed: ',
  $('.notTransformed').eq(0).get3dTransforms()
)