1

How would I go about converting a negative translate3d value into a positive number?

For example:

var val = $m('slider').style.webkitTransform;
console.log(val); // this returns a number like: translate3d(-93px, 0, 0);

How would I go about converting the values into positive numbers so that my output is:

translate3d(93px, 0, 0); // positive 93
Simon Adcock
  • 3,554
  • 3
  • 25
  • 41
Matt
  • 2,317
  • 7
  • 41
  • 52

3 Answers3

2

It is better to keep track of your coords also in JS if you can, but if this isnt possible, you need to parse out the individual values from the transform matrix...

Demo

If you get the computed style of the transform (not just the .style property) using getComputedStyle it will return a matrix:

// adapted from jQuery solution at https://stackoverflow.com/questions/7982053/get-translate3d-values-of-a-div
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 translation = getTransform( $m('slider') );
var translationX = translation[0];
var absX = Math.abs(translationX);
Community
  • 1
  • 1
Adam Coulombe
  • 1,505
  • 1
  • 11
  • 11
  • Hi, how would I go about dynamically setting these three new positive coordinates to new container such as: $clockcontainer.style.webkitTransform = (absX); – Matt Mar 25 '13 at 19:51
  • I essentially need set positive coordinates to another div because I am moving in the opposite position of another 3dtransform – Matt Mar 25 '13 at 19:52
  • I don't need one particular coordinate value, I would need all three values but set to a new div so that it can dynamically change. – Matt Mar 25 '13 at 19:56
  • As you can see in the answer above, the getTransform function returns the x,y, and z coords in an array. Run those values through Math.abs and you you can form a new translate with that. take a look at this new fiddle http://jsfiddle.net/3gBYB/2/ – Adam Coulombe Mar 26 '13 at 00:23
1

This is an example of how you could separate all of the values using split, parsing the integer values using parseInt and then getting the absolute value using abs()

Working fiddle: http://jsfiddle.net/bXgCP/

var mystr = "93px, 0, 10";

var myarr = mystr.split(",");
var finalStr = '';

for (var i=0;i<myarr.length;i++)
{ 

    myarr[i] = Math.abs(parseInt(myarr[i]),10);
}

finalStr = myarr.join(); // put the values back with the `,` format
What have you tried
  • 11,018
  • 4
  • 31
  • 45
1

The answer by Adam has a bug: It cannot handle decimal values like this:

matrix(1, 0, 0, 1, 100.000002649095, 100.000002649095)

Adapted regex to allow it:

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}.+))(?:, (-{0,1}.+))\))/);

    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
}
Sauronlord
  • 237
  • 2
  • 13