javascript - How do I get the absolute value of translate3d? - Stack Overflow

admin管理员组

文章数量:1415654

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

Share Improve this question Follow edited Mar 25, 2013 at 19:13 Simon Adcock 3,56233 gold badges2828 silver badges4242 bronze badges asked Mar 25, 2013 at 18:50 MattMatt 2,32777 gold badges4242 silver badges5353 bronze badges 5

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 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
}

本文标签： javascriptHow do I get the absolute value of translate3dStack Overflow