translate3d Values and Rotation Solution

https://stackoverflow.com/questions/44335496/how-to-retrieve-values-of-translate3d

by karthick6891

HTML

<body>
  <div id="slider"></div>
</body>

CSS

#slider {
-webkit-transform: translate3d(393px, -501px, 0) rotateZ(120deg);
}

JavaScript

function getTransform(el) {
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
    
    function rotate_degree(matrix) {
      if(matrix !== 'none') {
          var values = matrix.split('(')[1].split(')')[0].split(',');
          var a = values[0];
          var b = values[1];
          var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
      } else { 
      	var angle = 0; 
      }
      return (angle < 0) ? angle +=360 : angle;
		}
    
    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/);
    

    var result = [0,0,0];
    if(results){
    	if(results[1] == '3d'){
      	result = results.slice(2,5);
      } else {
        results.push(0);
        result = results.slice(5, 9); // returns the [X,Y,Z,1] value;
      }
      
    	result.push(rotate_degree(transform));
    };
    return result;
}

var slider = document.getElementById('slider');
var translation = getTransform(slider);

console.log(translation);

var translationX = translation[0];
var translationY = translation[1];
var absX = Math.abs(translationX);
var absY = Math.abs(translationY);

console.log('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3]);

alert('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3])