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

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

• javascript
• css
• translate3d

• By "convert" are you asking for absolute value or what? – David Starkey Commented Mar 25, 2013 at 18:52
• Yes, that is correct. – Matt Commented Mar 25, 2013 at 18:52
• val = translat3(-93px, 0 , 0) or just 93px, 0, 0) ? – What have you tried Commented Mar 25, 2013 at 18:54
• Math.abs(); w3schools./jsref/jsref_abs.asp – David Starkey Commented Mar 25, 2013 at 18:54
• Math.abs(val); doesn't seem to work. – Matt Commented Mar 25, 2013 at 18:58

3 Answers 3

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 puted style of the transform (not just the .style property) using getComputedStyle it will return a matrix:

// adapted from jQuery solution at https://stackoverflow./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);

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/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

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
}