How to retrieve values of translate3d?

Question

This question has already been asked before on StackOverflow , what is different with mine is that I'd like to be able to retrieve negative values and also be able to retrieve it with another parameter in transform which would be rotateZ(...deg) in my case.

I've followed another post on how I can get values of translate3d, the suggested code works and it gets the positiv values but not negative ones (the minus sign is missing).

Another problem is that when I add a new paramater nothing works anymore, I'd like to be able to add whatever paramaters and still make it work.

I think this comes from an issue with the Regex, see http://jsfiddle.net/Lindow/3gBYB/81/

Regular expression :

transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)

Javascript :

function getTransform(el) {
    var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
    var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);

    if(!results) return [0, 0, 0];
    if(results[1] == '3d') return results.slice(2,5);

    results.push(0);
    return results.slice(5, 8); // returns the [X,Y,Z,1] values
}

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

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

alert(absX + ' : ' + absY);

HTML/CSS :

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

----

#slider {
-webkit-transform:translate3d(-393px, -504px, 0) rotateZ(30deg);
// remove rotateZ to make it work with positiv values
// number in translate3d may vary from -9999 to 9999
}

Any suggestions ?

Answer 1

I've adapted your JSFiddle answer to provide a solution - updated your regex to allow for negative numbers, and added a method, "rotate_degree", that will calculate the rotation angle from the computedStyle matrix. This value is placed as an integer at the end of the results array.

Solution is on JSFiddle here: http://jsfiddle.net/Lymelight/3gBYB/89/

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])

Answer 2

I've also found another solution,

for (HTML) :

<div style="translate3d(-393px, -504px, 0) rotateZ(30deg);">...</div>

do (JavaScript) :

// get translate3d(..px, ..px, 0px) rotateZ(30deg)
function matrixToArray(matrix) {
  return matrix.substr(7, matrix.length - 8).split(', ');
}

function matrix_translate3d(pos) {
  var matrix_list = [];
  matrix = matrixToArray($(pos).css("-webkit-transform"));
  x = matrix[4].replace(/px/gi, '');
  y = matrix[5].replace(/px/gi, '');
  matrix_list.push(parseInt(x));
  matrix_list.push(parseInt(y));
  return matrix_list;
}

var matrix_position = matrix_translate3d(...);
// matrix_position[0], matrix_position[1]

Short solution.